CSS-Flex

Flex布局

模型

• 1 display：flex 是块级元素；display：inline-flex 是行内元素；
• 2 有主轴和交叉轴。

应用在 flex container上的属性

1 flex-flow

flex-flow：是 flex-direction || flex-wrap 当简写。可以省略，顺序任意。

• 1 flex-flow: row-reverse wrap;

2 flex-direction

flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布。

该属性是决定主轴上的方向。

• 1 row（默认）：主轴方向，从左到右。
• 2 row-reverse：主轴方向，从右到左。
• 3 column：主轴方向，从上到下。
• 4 column-reverse：主轴方向，从下到上。

3 flex-wrap

该属性是决定 flex container 是单行还是多行。

• 1 nowrap（默认）：不换行。
• 2 wrap：换行。
• 3 wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）。

4 justify-content

该属性是决定 flex items 在主轴的对齐方式。

• 1 flex-start（默认值）：与 main start 对齐。
• 2 flex-end：与 main-end 对齐。
• 3 center：居中对齐。
• 4 space-between：flex items 之间的距离相等；与 main start、main end 两端对齐。
• 5 space-evenly：flex items 之间的距离相等；flex items 与 main start、main end 之间的距离等于 flex items 之间的距离。
• 6 space-around：flex items 之间的距离相等；flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半。 (借鉴)

5 align-items

该属性是决定 flex items 在 cross axis（交叉轴） 上的对齐方式

• 1 normal：在弹性布局中，效果和 stretch 一样
• 2 stretch：当 flex items 在 cross axis 方向当 size 为 auto 时，会自动拉伸至填充 flex container 。
• 3 flex-start：与 cross start 对齐。
• 4 flex-end： 与 cross end 对齐
• 5 center：居中对齐。
• 6 baseline：与基准线对齐。第一行 (借鉴)

6 align-content

该属性是决定多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似。

• 1 stretch（默认值）：与 align-items 的 stretch 类似。
• 2 flex-start：与 cross start 对齐。
• 3 flex-end：与 cross-end 对齐。
• 4 center：居中对齐。
• 5 space-between：flex items 之间的距离相等；与 cross start、cross end 两端对齐。
• 6 space-around：flex items 之间的距离相等；flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半。
• 7 space-evenly：flex items 之间的距离相等；flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离。 (借鉴)

应用在 flex items 上的属性

1 flex

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

• 单值语法：值必须为以下其中之一：
  • 一个无单位数 number ：它会被当作 flex-grow 的值。
  • 一个有效的宽度值 width ：它会被当作 flex-basis 的值。
  • 关键字 none，auto 或 initial。
• 双值语法：第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
  • 第二个值必须为以下之一：
    • 一个无单位数：它会被当作 flex-shrink 的值。
    • 一个有效的宽度值 width：它会被当作 flex-basis 的值。
• 三值语法：
  • 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
  • 第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
  • 第三个值必须为一个有效的宽度值，并且它会被当作 flex-basis 的值。

2 flex-grow

该属性是决定 flex items 如何扩展。

• 1 可以设置任意非负数字（正小数、正整数、0），默认值是0。
• 2 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效。
• 3 如果所有 flex items 的 flex-grow 总和 sum 超过1，每个 flex item 扩展的 size 为
  • flex container 的剩余 size * flex-grow / sum。
• 4 如果所有 flex items 的 flex-grow 总和 sum 不超过1，每个 flex item 扩展的 size 为
  • flex container 的剩余 size * flex-grow。
• 5 flex items 扩展后的最终 size 不能超过 max-width \ max-height。

3 flex-basis

该属性是决定 flex items 在 main axis 方向上的 base size。

• 1 auto（默认值）、具体的宽度数值（100px）。
• 2 决定 flex items 最终 base size 的因素，从优先级高到低。
  • max-width \ max-height \ min-width \ min-height
  • flex-basis
  • width \ height
  • 内容本身的 size

4 flex-shrink

该属性是决定 flex items 如何收缩。

• 1 可以设置任意非负数字（正小数、正整数、0），默认值是1。
• 2 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效。
• 3 如果所有 flex items 的 flex-shrink 总和超过1，每个 flex items 收缩的 size 为
  • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和。
• 4 如果所有 flex items 的 flex-shrink 总和 sum 不超过1，每个 flex items 收缩的 size 为
  • flex items 超出 flex container 的 size * sum * 收缩比例 / 所有 flex items 的收缩比例之和。
  • 收缩比例 = flex-shrink * flex items 的 base size。
  • base size 就是 flex items 放入 flex container 之前的 size。
• 5 flex items 收缩后的最终 size 不能小于 min-width \ min-height 。

5 order

该属性是决定 flex items 的排布顺序。

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

6 align-self

该属性是可以通过 align-self 覆盖 flex container 设置的 align-items 。

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