flex 布局 - 掘金

1、认识 flex 布局

flex 布局（Flexible 布局，弹性布局，弹性盒子），是CSS3的一种新布局模式。flex 布局是目前 web 开发中使用最多的布局方案，目前在移动端用的最多，PC端也使用越来越多了。在认识 flex 布局之前，首先明确两个重要的概念：

（1）开启了 flex 布局的元素叫 flex container，flex container 里面的直接子元素叫做 flex items。

（2）通过设置 display 属性为 flex 或者 inline-flex 可以成为 flex container，display 属性的属性值为 flex 下的 flex container 以 block-level （块元素） 形式存在，display 属性的属性值 inline-flex 下的 flex container 以 inline-level （行内元素） 形式存在。

<div style="display:flex/inline-flex"> <!--设置display属性为flex或者inline-flex 开启flex布局-->
    <div></div>            <!--设置display属性为flex或者inline-flex 可以成为flex container-->
    <div></div>
    <div></div>
</div>

2、flex 布局模型

3、flex 相关属性

应用在 flex container 上的CSS属性	应用在 flex items 上的CSS 属性
flex-direction	设置flex items的排列方向	order	决定 flex items 的排布顺序
justify-content	设置flex items在主轴的对齐方式	align-self	覆盖 flex container 设置的 align-items
align-items	设置flex items在交叉轴的对齐方式	flex-grow	决定 flex items 如何扩展
flex-wrap	决定 flex items 是单行还是多行显示	flex-shrink	决定 flex items 如何收缩
flex-flow	flex-direction、flex-wrap 两个属性的简写	flex-basis	设置 flex items 在主轴方向上的 base size
align-content	决定多行 flex items 在 cross axis 上的对齐方式	flex	flex-grow、flex-shrink、flex-basis 的简写

4、flex container 相关属性

4.1 flex-direction（flex container 的属性）

将父元素设置 flex 布局后，其 flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布，flex-direction 属性决定了 main axis 的方向，有下面 4 个取值：

row（默认值，主轴从左到右）	row-reverse（主轴从右到左）	column（主轴从上到下）	column-reverse（主轴从下到上）

4.2 justify-content（flex container 的属性）

将父元素设置 flex 布局后，justify-content 属性决定了 flex items 在 main axis 上的对齐方式，有下面几个取值：

flex-start（默认值）：与 main start 对齐	flex-end：与main end对齐	center：居中对齐
space-between：flex items之间的距离相等，与main start、main end两端对齐
space-evenly：flex items 之间的距离相等，flex items 与main start、main end之间的距离等于flex items之间的距离
space-around：flex items 之间的距离相等，flex items 与main start、main end之间的距离是flex items之间距离的一半

4.3 align-items（flex container 的属性）

将父元素设置 flex 布局后，align-items 属性决定了 flex items 在 cross axis上的对齐方式，有下面几个取值：

normal：在弹性布局中，效果和stretch一样，如果flex items没有设置高度，会自动拉伸至填充flex container
stretch：当flex items在cross axis 方向的 size为auto时，会自动拉伸至填充flex container	baseline：与基准线(内容第一行文本)对齐
center：居中对齐	flex-start：与cross start对齐	flex-end：与cross end对齐

4.4 flex-wrap（flex container 的属性）

将父元素设置 flex 布局后，flex-wrap 属性决定 flex items 在 flex container 中是单行还是多行显示，有下面几个取值：

nowrap（默认）：flex items单行显示	wrap：flex items多行显示	wrap-reverse：多行（对比wrap，cross start与cross end相反）

4.5 flex-flow （flex container 的属性）

将父元素设置 flex 布局后，flex-flow 属性是 flex-direction || flex-wrap 的简写，可以省略，顺序任意。

4.6 align-content（flex container 的属性）

将父元素设置 flex 布局后，align-content 属性决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似，有下面几个取值：

stretch（默认值）：与align-items的 stretch类似	center：居中对齐
flex-start：与cross start对齐	flex-end：与cross end对齐
space-between：flex items之间的距离相等，与cross start、cross end两端对齐
space-around：flex items之间的距离相等，flex items与cross start、cross end 之间的距离是flex items之间距离的一半
space-evenly：flex items 之间的距离相等，flex items 与cross start、cross end 之间的距离等于flex items之间的距离

5、flex items 相关属性

5.1 order（flex items 的属性）

将父元素设置 flex 布局后，子元素的 order 属性决定了 flex items 的排布顺序，可以设置任意整数（正整数、负整数、0），值越小就越排在前面，默认值是 0。

5.2 align-self（flex items 的属性）

将父元素设置 flex 布局后，子元素 flex items 可以通过 align-self 属性覆盖 flex container 设置的 align-items，有下面几个取值：

auto（默认值）：遵从 flex container 的 align-items 设置
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

5.3 flex-grow（flex items 的属性）

将父元素设置 flex 布局后，子元素的 flex-grow 属性决定了 flex items 如何扩展，可以设置任意非负数字（正小数、正整数、0），默认值是0。当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效：

（1）如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为 flex container 的剩余 size*flex-grow/sum。

（2）如果所有 flex items 的 flex-grow 总和不超过 1，每个 flex item 扩展的 size 为 flex container 的剩余 size*flex-grow。

flex items 扩展后的最终size 不能超过 max-width\max-height。

5.4 flex-shrink（flex items 的属性）

将父元素设置 flex 布局后，子元素的 flex-shrink 属性决定了 flex items 如何收缩，可以设置任意非负数字（正小数、正整数、0），默认值是1。当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效。

（1）如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size 为 flex items 超出 flex container 的 size*收缩比例/所有 flex items 的收缩比例之和。

（2）如果所有 flex items 的 flex-shrink 总和 sum 不超过 1，每个 flex item 收缩的 size为 flex items 超出 flex container 的size*sum*收缩比例/所有 flex items 的收缩比例之和，收缩比例=flex-shrink*flex item的base size，base size 就是 flex item 放入flex container 之前的 size。

flex items 收缩后的最终 size 不能小于min-width\min-height

5.5 flex-basis（flex items 的属性）

将父元素设置 flex 布局后，子元素的 flex-basis 用来设置 flex items 在 main axis 方向上的 base size，可以设置为 auto（默认值）、具体的宽度数值（100px）。

决定 flex items 最终 base size 的因素，从优先级高到低：（1）max-width\max-height\min-width\min-height（2）flex-basis（3）width\height（4）内容本身的 size。

5.6 flex（flex items 的属性）

将父元素设置 flex 布局后，子元素的 flex 属性是 flex-growlI flex-shrink flex-basis 的简写，flex 属性可以指定1个，2个或3个值。

单值语法：值必须为以下其中之一：（1）一个无单位数（<number>）：它会被当作<flex-grow>的值。（2）一个有效的宽度（width）值：它会被当作<flex-basis>的值。（3）关键字none，auto或initial。

双值语法：第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。第二个值必须为以下之一：（1）一个无单位数：它会被当作<flex-shrink>的值。（2）一个有效的宽度值：它会被当作<flex-basis>的值。

三值语法：第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值。第二个值必须为一个无单位数，并且它会被当作<flex-shrink>的值。第三个值必须为一个有效的宽度值，并且它会被当作<flex-basis>的值。