Flex 弹性盒子布局

目录

一、容器 container属性

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

二、flex 项目元素 item 属性

1.flex-grow

2.flex-basis

3.flex-shrink

4.order

5.align-self

6.flex

---

采用flex布局的元素，称为flex容器（flex container），简称“容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。

一、容器 container属性

1.flex-direction

flex-direction决定了main axis（主轴）的方向，有4个取值：

• row（默认值）
• row-reverse
• column
• column-reverse

2.flex-wrap

flex-wrap决定了flex container是单行还是多行

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

3.flex-flow

flex-flow 属性是 flex-direction和flex-wrap 的简写。

• 顺序任何，并且都可以省略；

4.justify-content

justify-content 决定了flex items在main axis上的对齐方式

• flex-start（默认值）：与main start对齐
• flex-end：与main end对齐
• center：居中对齐
• space-between：1>.flex items之间的距离相等；

                                     2>.与main start、main end两端对齐；

• space-around：1>.flex items之间的距离相等

                                   2>.flex items与main start、main end之间的距离是flex items之间距离的一半

• space-evenly：1>.flex items之间的距离相等

                                  2>.flex items与main start、main end之间的距离 等于flex items 之间的距离

5.align-items

align-items 决定了flex items在cross axis 上的对齐方式

• normal：在弹性布局中，效果和stretch一样
• stretch：当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container
• flex-start：与cross start 对齐
• flex-end：与cross end 对齐
• center：居中对齐
• baseline：与基准线对齐

6.align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

• flex-start（默认值）：与main start对齐
• flex-end：与main end对齐
• center：居中对齐
• space-between：1>.flex items之间的距离相等；

                                     2>.与main start、main end两端对齐；

• space-around：1>.flex items之间的距离相等

                                   2>.flex items与main start、main end之间的距离是flex items之间距离的一半

• space-evenly：1>.flex items之间的距离相等

                                  2>.flex items与main start、main end之间的距离 等于flex items 之间的距离

二、flex 项目元素 item 属性

1.flex-grow

flex-grow 决定了 flex items 如何扩展（拉伸/成长）

• 可以设置任意非负数字（正小数、正整数、0），默认值是0
• 当flex container 在main axis 方向上有剩余 size 时，flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sun 超过1，每个flex item 扩展的size 为

• flex container 的剩余 size * flex-grow / sum

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

2.flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size

• auto（默认值）
• 具体的宽度数值（100px）

决定 flex items 最终 base size 的因素，从优先级高到低

• max-width \ max-height \ min-width \ min-height
• flex-basis
• width \ height
• 内容本身的size

3.flex-shrink

flex-shrink 决定了flex items 如何收缩（缩小）

• 可以设置任意非负数字（正小数、正整数、0），默认值是1
• 当flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

如果所有 flex items 的flex-shrink 总和超过1，每个flex item 收缩的 size 为

• flex items 超出 flex container 的size * 收缩比例 / 所有flex items 的收缩比例之和

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

4.order

order 决定了 flex items 的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
• 默认值是0

5.align-self

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

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

---

stretch：当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container

flex-start：与cross start 对齐

flex-end：与cross end 对齐

center：居中对齐

baseline：与基准线对齐

---

6.flex

flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个，2个或3个值。

单值语法：值必须为以下其中之一：

• 一个无单位数()：它会被当作的值。
• 一个有效的宽度（width）值：它会被当作的值。
• 关键字none，auto或initial

双值语法：第一个值必须为一个无单位数，并且它会被当作的值。

• 第二个值必须为以下之一：1>.一个无单位数：它会被当作的值。

                                                   2>.一个有效的宽度值：它会被当作的值。

三值语法：

• 第一个值必须为一个无单位数，并且它会被当作的值。
• 第二个值必须为一个无单位数，并且它会被当作的值。
• 第三个值必须为一个有效的宽度值，并且它会被当作的值。