flex布局

9-21 flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

作用

解决子元素盒子在父元素盒子中布局空间分布问题

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

公用属性

display：flex

将当前元素布局设置为flex弹性布局

常用属性

1父元素属性

1）flex-direction

子元素在主轴方向顺序调整

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row ：默认值，主轴方向为水平方向，从左向右排列，起始位置是容器的左边线；
• row-reverse：主轴方向是水平方向，从右向左排列，起始位置是容器的右边线；
• column：垂直方向，从上到下排列，其实位置是容器的上边线；
• column-reverse：垂直方向，从下到上排列，起始位置是容器是下边线；

2）flex-wrap

子元素在主轴方向换行调整

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默认）：不换行

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

例：

flex-flow: column wrap;
// 相当于
flex-direction: column;
flex-wrap: wrap;

4）justify-content

子元素在主轴上的对齐方式

合在一起大概意思就是使行的内容对齐的意思

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start：默认值，项目在主轴方向上，以主轴起始位置对齐。图例中主轴方向是从左到右，起始位置是容器的左边线，可以看到项目是左边对齐的。

• flex-end：项目在主轴方向上，以主轴结束的位置对齐。图例中结束位置是容器的右边线，所以是右边对齐。

• center：项目在主轴方向上居中。

• space-between：项目在主轴方向上，两端对齐，然后项目中间间隔是相等的。

  剩余的空间平均的分配在每个项目之间

• space-around：在主轴方向上，剩余的空间被平均的分配到每个项目的两侧。

• space-evenly：在主轴上，剩余空间平均分配，与 space-between 不同的是，between 是在项目之间，而 evenly 是在轴的最左边和最右边也同样会有空间分配。

  剩余的空间是均匀分配的

5）align-items

子元素在交叉轴上对齐方式

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch：默认值，如果项目没有设置固定高度，则会被拉伸填充满交叉轴方向剩余的空间。
• flex-start：项目在沿交叉轴起始线位置对齐。
• flex-end：项目沿交叉轴终点线位置对齐。
• center：项目在交叉轴方向居中对齐。
• baseline：项目在交叉轴方向沿项目中第一行文字的基线对齐。

6）align-content(多行项目,单行不起作用)

align-content 控制多行项目（多根主轴线）对齐方式。类似 justify-content ，只不过，align-content 是控制行与行之间的空间分配，justify-content 是控制项目与项目之间的空间分配。

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• stretch：默认值，交叉轴方向剩余的空间平均分配到每一行，并且行的高度会拉伸，填满整行的空间。图例中，因为 align-items 默认值的效果，第一行高度原本是以最高的“元素一”的高度为行的高度。然后又因为 align-content 的效果，拉伸了行的高度。而其中，“元素一”设置了固定高度，所以没有被拉伸，“元素二、三”没有设置高度，所以被拉伸填充到与行同样的高度。
• flex-start：所有行在交叉轴方向上，以交叉轴的起始位置对齐。
• flex-end：所有行在交叉轴方向上，以交叉轴的终点位置对齐。
• center：所有行在交叉轴上居中对齐。
• space-between：行在交叉轴方向上，两端对齐，然后行中间的间隔相等。
• space-around：在交叉轴方向上，剩余的空间被平均的分配到每一行的两侧。
• space-evenly：在交叉轴方向上，剩余空间平均分配，与 space-between 不同的是，between 是在行之间，而 evenly 是在轴的最左边和最右边也同样会有空间分配。

小技巧：

justify-content: center;

align-items: center;

垂直居中常用

2.子元素属性

1）flow-grow

flex-grow 用于控制项目在主轴方向上拉伸放大占剩余空间（如果有的话）的比例。

.item {
  flex-grow: <number>;
}

默认值：0，不放大。

可以看到，放大的比例跟数值的大小无关，跟数值的比例有关。

2）flow-shrink

flex-shrink 用于控制项目在主轴方向上缩小的程度。数值越大，收缩越多。但它与 flex-grow 不一样，不是按比例收缩的，具体的收缩算法原理可以参考

.item {
  flex-shrink: <number>;
}

默认是 flex-shrink: 1 ，同等比例收缩。

3）flex-basis

用于初始化每个项目占据主轴空间的尺寸（main size）。

.item {
  flex-basis: <length> | auto;
}

默认值：flex-basis: auto , 自动检测尺寸，如果项目有设置尺寸，则取项目设置的值，否则根据项目内容计算出尺寸

可以像设置 width，height 一样设置 flex-basis

4）flex

flex 是上面三个合并的简写。

.item {
  flex: <flex-grow> [<flex-shrink>] [<flex-basis>];
}

默认值：flex: 0 1 auto; 后两个参数为可选参数。

5）order

order 用于控制项目在主轴上的排列顺序。

.item {
 order: <number>;
}

默认值： order: 0; ，参数值正负数都可以，全部项目按主轴方向依次排列。设置后，按数值大小，从小到大排列。