CSS 加油包之 flex 用法

本文是阅读张鑫旭技术博客《写给自己看的display: flex布局教程》的学习笔记，总结的非常好，在此感谢，侵删。 原文戳此链接

---

创建 display: flex 布局

给 div 设置 display:flex; 给 span 设置 display:inline-flex后； 直接设置的元素称为 flex 容器，里面的子元素称为 flex 子项。
作用在 flex 容器上的属性: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content;
作用在 flex 子项上的属性：order, flex-grow, flex-shrink, flex-basis, flex, align-self。

作用在 flex 容器上的 CSS 属性

1. flex-direction

• flex-direction 用于控制子项整体布局方向。
• 语法: flex-direction: row | row-reverse | column | column-reverse
• 🌰 举例：

2. flex-wrap

• flex-wrap 用来控制子项整体是换行还是单行显示；如果换行的话下一行是否反方向显示。
• 语法：flex-wrap: nowrap | wrap | wrap-reverse
• 🌰 举例：
• ⚠️ 注：如果规定 img{max-width:100%;} ，那么 nowrap 的宽度不溢出，子项宽度会被压缩。

3. flex-flow

• flex-flow 是 flex-direction 和 flex-wrap 的缩写
• 语法： flex-flow: <'flex-direction'> || <'flex-wrap'> ，多个属性同时使用时使用空格分隔；
• 🌰 举例：

.container {
  display: flex;
  flex-flow: row-reverse wrap-reverse
}

4. justify-content

• justify-content 决定了水平方向子项的对齐和分布方式；类比 CSS 的 text-align 属性值 justify 实现 flex 元素的两端对齐，justify-content 控制内联元素的水平对齐。
• 语法： justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

1. flex-start 与文档流方向相关，默认左对齐；
2. flex-end 与文档流方向相关，默认右对齐；
3. center 居中对齐；
4. space-between 两端对齐，多余的空间间距在元素中间区域分配；
5. space-around 环绕，每个子项两侧环绕互不干扰的等宽空白间距，最左和最右边的间距是子项间间距的一半；
6. space-evenly 所有子项，包括边缘的子项间距均相等

5. align-items

• align-items决定了 flex 子项相对于 flex 容器在垂直方向的对齐方式；
• 语法： align-items: stretch | flex-start | flex-end | center | baseline;

1. stretch 默认值，flex 容器适应 flex 子项的高度；
2. flex-start 与文档流方向相关，默认顶部对齐；
3. flex-end 与文档流方向相关，默认底部对齐；
4. center 垂直居中对齐；
5. baseline 所有子项都相对于容器的基线对齐。

• 🌰 举例：

6. align-content

• align-content 可以看成是垂直方向的 justify-content，即垂直方向每一行元素的对齐和分布方式。如果所有子项只有一行，那么 align-content 属性没有效果；
• 语法： align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

1. stretch 默认值，每行子元素都等比例拉伸/缩小；
2. flex-start 与文档流方向相关，默认为顶部堆砌；
3. flex-end 与文档流方向相关，默认为底部堆砌；
4. center 整体垂直居中对齐；
5. space-between 上下两行两端对齐，其余每行等分剩余空间；
6. space-around 每行元素上下都独享不重叠的空白空间，上下两端的空白空间是其余空白空间的一半；
7. space-evenly 每行元素上下都独享不重叠的空白空间，上下两端的空白空间与行间空间距离相等。

作用在 flex 子项上的 CSS 属性

• 在此仅列举语法，不做赘述

order: <integer>; /* 整数值，默认为0 */
flex-grow: <number>; /* 数值，可以是小数，默认为0 */
flex-shrink: <number>; /* 数值，默认为1 */
flex-basis: <length> | auto; /* 默认为 auto */
flex: none | auto | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] /* 第二和第三个参数是可选的；默认为0 1 auto */
align-self: auto | flex-start | flex-end | center | baseline | stretch; /* 默认为 auto */

其他

• 在 Flex 布局中，flex 子元素的设置 float，clear 和 vertical-align 属性均无效；
• Flexbox 布局适合一维布局，Grid 布局更适合二维布局

Reference List
张鑫旭 《写给自己看的display:flex 教程》
CSS-Tricks, A Complete Guid to Flexbox