第一部分: 前言

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
用法: display: flex 所在元素就成为 flex盒子属性元素.拥有了 弹性盒子 的功能.

在页面布局（layout）中. flex布局针对的是传统的 基于盒状模型，依赖 display 属性 + position属性 + float属性的不足.提出了一种新的 简便、完整、响应式地实现各种页面布局
让布局正式成为一种可操控的属性API.

下面我们来介绍flex的特点:

flex 属性全景图:

css-flex.png

flex的核心就是两根轴: 主轴(main axis) 和 侧轴(cross axis)
所有的 子项目 都被 串在 这两根轴上, 被这两轴所支配.
支配它们的在 父元素里的 空间分配布局.排列.所占比例大小...等等

根据flex的组织结构.可以判定出:
它分为两个控制模块: 父容器端 和 子项目端

• 父容器端:

• 子项目端

第二部分: 实例讲解

父容器端

• flex-direction

顾名思义: direction 是方向,动向的意思.
因为 flex轴是有 矢量性质的.就决定了它必行有一个属性来控制方向. 这属性值就是 felx-direction

row
实例:

  display: flex;
  flex-direction: row;

效果:

css-flex-row.png

row-reverse

 display: flex;
 flex-direction: row-reverse; 

效果:

css-flex-row-reverse.png

column

 display: flex;
 flex-direction: column; 

效果:

css-flex-column.png

column-reverse

  display: flex;
  flex-direction: column-reverse; 

效果:

css-flex-column-column.png

• flex-wrap

wrap: 包，裹; 用…包裹; 用…缠绕 的意思.
放在css里 就是 锁定.闩住 的 作用. nowrap就是解除 闩扣.释放自由的味道....

实例:
nowrap
注意:: 当flex元素里设置 nowrap后, 里面的子项目在水平方向上会均匀分布, 子项目设置的宽度失效.

display: flex;
flex-wrap: nowrap; 

效果:

css-nowrap.png

wrap

display: flex;
flex-wrap: wrap; 

效果:

css-wrap.png

wrap-reverse

display: flex;
flex-wrap: wrap-reverse; 

效果:

css-wrap-reverse.png

flex-flow
flex-direction 与 flex-wrap 的简写,默认值: row nowrap
flex-direction有4个参数值. flex-wrap有三个参数值
所以flex-flow有: 4x3 =12个组合值
例如:

  display: flex;
  flex-flow: row-reverse wrap;

效果:

css-flex-flow.png

• justify-content

它控制着主轴上子项目的排列方式,
值如下列表:

效果:

css-justify-content.jpg

align-items
定义 侧轴上 子项目的排列方式.
值如下列表:

案例效果:

css-align-items.jpg

• justify-content

justify-content 针对的是 多根主轴线 在垂直主轴方向(与主轴矢量方向成90°) 的 对齐排列方式
如果项目只有一根轴线，该属性不起作用

案例效果:

css-align-content.jpg

子项目端

• order

顾名思义: order 能给 子项目 划分排列权重(排列顺序)...，默认为0 参数为整数,可负值

/* 值越小越靠近主轴起点 */
.box .item:nth-child(2) {
  order: -1;
}
.box .item:nth-child(5) {
  order: -2;
}

效果:

css-order.png

总结: 默认值为0. 也就是说..可以把 0 当做一个 参考界线..可以灵活的安排子元素的排列顺序

• flex-grow

它控制着 项目的 放大比例，默认为0，即如果存在剩余空间，也不放大
既然是 比列 , 那就意味着 它是一个相对的关系. 相对的参考是 谁呢? .....请看下面例子

案例: 父元素宽度给定. 子项目宽度未定

/* 父容器的宽度 平局分成 子项目数目+flex-grow参数之和 这么多块.再按flex-grow权重分派下去. */
.box .item:nth-child(2) {
  background: green;
  flex-grow: 2;
}
.box .item:nth-child(5) {
  background: green;
  flex-grow: 5;
}

效果:

css-flex-grow.png

总结: 得出上面 相对 谁的问题: 相对于 父容器划分的块数...

• flex-shrink

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 参数负值对该属性无效
案例: 父元素宽度给定. 父容器不换行.子项目宽度给定

.box .item:nth-child(2) {
  background: green;
  flex-shrink: 4;
}

效果:

css-flex-shrink.png

• flex-basis

用于设置或检索弹性盒伸缩基准值 参数为: number+px
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

由于这个属性太过鸡肋, 一般很少用到. 所以不做实例..(实际上可以忽略这个属性)

• flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
注意: 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值.

• align-self

align-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

案例效果:

css-align-self.jpg