## Flex [TOC] ---- ### 简介 ```html <style> .container { display: flex; /* display: inline-flex; */ /* 设为 Flex 布局以后，子元素的 `float` 、`clear` 和 `vertical-align` 属性将失效。 */ } </style> <div class="container"> <div class="item"></div> <div class="item"></div> ... </div> ``` 弹性布局，容器中项目的宽度、高度可以根据容器的大小而自动伸缩，故称为 “弹性布局”。 传统的弹性布局，依靠 `width: auto | 100%` 这类非固定值的属性值，而 flex 有更灵活的方式来控制项目如何填充容器以及布局。 本文档主要内容是对 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 、 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 的精简整理，方便快速查阅。 ---- ### 容器属性 #### flex-direction ```css .container { flex-direction: row | row-reverse | column | column-reverse; } ```  控制主轴的方向，默认值 `row` 表示 横向的 从左到右。 ---- #### flex-wrap ```css .container { flex-wrap: nowrap | wrap | wrap-reverse; } ```  定义项目在容器内是否能换行（当一行放不下时），默认值 `nowrap` 表示不换行。 ---- #### justify-content ```css .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } ```  定义项目沿主轴的对齐方式，可决定如何分配剩余空间，默认值 `flex-start`。 ---- #### align-items ```css .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } ```  可视为交叉轴的 `justify-content` 版本。定义了项目沿交叉轴的对齐方式（上下对齐），默认值 `stretch` 表示拉伸高度，如果项目未设置高度或设为 `auto`，则项目将占满整个容器的高度。 ---- #### align-content ```css .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } ```  **仅对多行项目有效**，多行时定义项目沿交叉轴的布局方式，默认值 `flex-start`。 ---- #### gap ```css .container { gap: 10px; gap: 10px 20px; /* row-gap column-gap */ row-gap: 10px; column-gap: 20px; } ```  定义项目之间的间隔大小（左右和上下的空间间距，仅项目之间的间距，而不是与容器间的空间）。因为轴向对齐的影响，所以此属性可认为是最小间距配置。 请注意，为了便于展示效果，本文的示例图默认都是有 `gap` 值的效果。 ---- ### 项目属性 #### order ```css .item { order: 5; /* default is 0 */ } ```  定义项目的排序，默认情况下项目的 `order` 属性都为 0，弹性项目按源代码顺序排列。（数值越小，排列越靠前） ---- #### flex-grow ```css .item { flex-grow: 2; /* default 0 */ } ```  定义项目的放大比例，**默认值 0 即如果存在剩余空间，也不放大**（负数无效）。它决定了项目如何分配弹性容器的剩余空间。 如果所有项目都将 `flex-grow` 设置为 1 ，则容器中的剩余空间将平均分配给所有子项。如果其中一项的值为 2 ，则该项将占用其他任一项目空间的两倍（或者至少会尝试）。 ---- #### flex-shrink ```css .item { flex-shrink: 3; /* default 1 */ } ```  类似 `flex-grow` 属性，定义了项目的缩小比例，**默认值 1，即如果空间不足，项目将缩小**（负数无效）。 如果所有项目的 `flex-shrink` 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 `flex-shrink` 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。 `flex-wrap: wrap;` 换行时，空间不足 的情况是指一行不足以放一个项目的情况。 如果不换行，也不允许缩小，那么项目将在一行溢出到容器外（此时用 overflow 控制溢出效果）。 ---- #### flex-basis ```css .item { flex-basis: <length> | auto; /* default auto */ } ```  定义项目的默认宽度，默认值 `auto`，可以设为跟 `width` 属性一样的值（比如350px），则项目将占据固定空间。 当项目同时设置 `width` 属性时，以 `flex-basis` 优先级高为准，但当 `flex-basis: auto` 时，则以 `width` 属性为准。 `flex-basis: 0 || 0%` 等同 `width: min-content`。 ---- #### align-self ```css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ```  允许项目覆盖由 `align-items` 指定的对齐方式。 > 注意， `float` 、 `clear` 和 `vertical-align` 对弹性项目没有影响。 ---- ### 属性简写 #### flex-flow ```css .container { flex-flow: column wrap; } ``` `flex-direction` 和 `flex-wrap` 属性的简写，它们共同定义了 Flex 容器的主轴和交叉轴。默认值 `row nowrap`。 ---- #### flex ``` .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } ``` 这是 `flex-grow` 、`flex-shrink` 、 `flex-basis` 的简写。第二个和第三个参数（ `flex-shrink` 和 `flex-basis` ）是可选的。默认值为 `0 1 auto`。 注意，如果省略了 `flex-basis` 属性，则会将其更改为 `0%`： ```css flex: 5; flex-grow: 5; flex-shrink: 1; flex-basis: 0%; ``` > `.item { margin-right: auto; }` 可以影响 flex 项目的空间分配，这点很有用，可以产生让项目右侧就像多出来一个 `flex-grow: 1;` 的项目一样的效果。 ---- ### 栅格系统实现 [Flexbox 打造栅格系统 - 知乎](https://zhuanlan.zhihu.com/p/21887541) 栅格系统要素：容器，项目，装订线（项目间距）。这些在 flex 容器中浑然天成，所以用 flex 实现12栅格系统就非常简单了。 ```css .container { display: flex; justify-content: flex-star gap: 15px; padding: 15px; } .col-1 { flex: 0 0 8.33333%; } ... .col-3 { flex: 0 0 25%; } ... .col-12 { flex: 0 0 100%; } ```