Flex布局

2.flex布局属性

容器属性

• flex-flow

• flex-direction

• flex-wrap

• justify-content

• align-items

• align-content

元素属性

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

3.flex弹性盒模型

3.1.主轴

flex-direction属性

取值：row(默认) | row-reverse（行反转） | column（列） | column-reverse

3.2.沿主轴的排列处理

flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse 【决定是否换行】

3.3.flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

3.4.justify-content（内容调整）属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

flex-start（左对齐）

center （居中 ）

flex-end  (右对齐)

space-between (左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等 ）

space-around （项目之间间距为左右两侧项目到容器间距的2倍 ）

space-evenly （项目之间间距与项目与容器间距相等 ）

3.5.align-items（侧轴对齐方式，垂直方向，交叉轴）属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

flex-start（项目在交叉轴紧贴容器顶部 ）

flex-end （与flex-start相反）

center （交叉轴中心位置排列 ）

baseline （比较特殊，它让项目以第一行文字的基线为参照进行排列）

注意：常理来说justify-content与align-items默认分别处理项目主轴，交叉轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理交叉轴，align-items处理主轴。

案例：想让一个子元素水平垂直居中

justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */

3.6.align-content属性

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

flex-start ，center，flex-end 与align-items属性表现一致；

space-around（项目之间间距为上下两端项目与容器间距两倍 ）

space-evenly （项目之间间距与项目到容器之间间距相等 ）

space-between （上下两侧项目紧贴容器 ）

注意：

align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。

align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐

3.8.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

3.9.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。

3.10.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

3.11.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

3.12.flex（推荐常用）

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

还有最常用的flex：1即为flex-grow：1

3.13.align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。