❕Flex

赋予父容器布局子容器的能力

flex layout 的主要思想是：父容器可以改变（直接）子容器的 width + height + order，以便很好地填充父容器的可用空间而不 overflow。

父容器，flex container
子容器，flex items

即使子容器的大小是未知的或是动态的，也能很方便地被 lay out 和 align，这就是 “flex” 的含义。

1. 相关术语

如果说常规布局是基于 block flow direction 和 inline flow direction，那么 flex 布局就是基于 flex-flow direction。

flex 的子容器是按照 main axis（主轴）或 cross axis（横轴）来进行布局的。

main axis 是由父容器的 flex-direction 属性设置
cross axis 即垂直于 main axis 的轴
main size 是子容器的在 main axis 上的 size（width 或 height）
cross size 是子容器的在 cross axis 上的 size（height 或 width）

flexbox 是单向布局的，要么是 horizontal rows 要么是 vertical columns。

2. container 属性

2.1 display

display 定义了一个 flex container，开启了 flex layout 的上下文。

display: flex;
display: inline-flex;

2.2 main-axis 和 cross-axis

flex-direction 建立了 main-axis，即子容器的放置方向
flex-wrap 表示在 cross-axis 上如何折行
flex-flow 是 flex-direction 和 flex-wrap 的缩写
- 也就是说，它同时定义了 flex container 的 main-axis 和 cross-axis

/* main axis */
flex-direction: row; /* 默认 */
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

/* cross axis */
flex-wrap: nowrap; /* 默认 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* 同时定义 main-axis 和 cross-axis  */
flex-flow: row nowrap; /* flex-direction flex-wrap */

2.3 分配剩余空间

justify-content 用来定义父容器如何分配在 main-axis 上的多余空间，即子容器沿 main-axis 的对齐方式
- left, right
align-content 用来分配 lines 在 cross-axis 上的多余空间（仅针对多行时）
- normal（默认）
- stretch

公共取值：

flex-start, flex-end, center：针对 flex-direction（main-axis 时）
space-between, space-around, space-evenly
start, end：针对 writing-mode（main-axis 时）

2.4 cross-axis 上的对齐

align-items 定义了子容器沿 cross-axis 与同行（或同列）上的兄弟们的对齐方式。

取值可以是：

stretch（默认）：拉伸以填充容器
flex-start, flex-end, center
start, end
baseline

2.5 gap

row-gap
column-gap
gap 是 row-gap 和 column-gap 的缩写

gap: 10px;
gap: 10px 30px; /* row-gap column-gap */
row-gap: 10px;
column-gap: 30px;

3. items 属性

3.1 flex

以下属性，设置当父容器在分配剩余空间时，子容器如何“缩”“放”自身的比例。

flex-grow 设置子容器需要 grow 时的比例
flex-shrink 设置子容器需要 shrink 时的比例
flex-basis 设置子容器的 size
- 当值是 0 时，表示不考虑周围的额外空间
- 当是其它值时，表示（在父容器给分配空间之前）的默认 size
flex 是 flex-grow, flex-shrink, flex-basis 的缩写（推荐）

flex-grow: 0;     /* 默认，负值无效 */
flex-shrink: 1;   /* 默认，负值无效 */
flex-basis: auto; /* 默认 */

/* 缩写 */
flex: 0 1 auto;   /* 默认 */

3.2 cross-axis 上的对齐

设置当前子容器沿 cross-axis 与同行（或同列）上的兄弟们的对齐方式。

其值会覆盖父容器设置的 align-items。

3.3 order

设置子容器的顺序，默认值是 0。

当值相等时，就按照元素在 HTML 代码里的出现顺序进行排列。

order: 0;  /* 默认 */
order: -1;
order: 3;

4. 主要参考

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Previous布局 NextGrid

Last updated 2 years ago