前言

最近重新学习了一下Flex Box，把知识点和相关概念做了一个梳理。加深记忆，方便回顾。

参考内容：

Flex Box

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。

之所以说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container），容器里的子元素称为项目（item）。

1.容器

概念

从容器的角度来看，有两个不变的轴，主轴由 flex-direction 定义，另一根轴始终垂直于它。默认定义是：

1) 水平方向的主轴（main axis），主轴开始位置称为main start，结束位置称为 main end

2) 垂直方向的交叉轴（cross axis），交叉轴开始位置称为 cross start，结束位置称为 cross end

相关属性
- flex-direction：定义了主轴方向。决定容器内项目排列方向，默认从左到右row。如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline(行级)方向延伸；选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block(块级) 排列的方向。
```
flex-direction：row | row-reverse | column | column-reverse
```
  特别注意：flex-direction设置后会引起主轴和交叉轴方向改变。

flex-wrap：决定容器主轴方向上项目是否换行，默认不换行nowrap。reverse表示逆序。
```
flex-wrap: nowrap | wrap | wrap-reverse;
```

flex-flow：是flex-direction 和flex-wrap属性的简写。默认为：row nowrap。
```
flex-flow: <flex-direction> || <flex-wrap>;
```

justify-content：决定容器内项目在主轴上对齐方式。默认左对齐 flex-start。

justify-content: flex-start | flex-end | center | space-between | space-around;
/**
* flex-start（默认值）：左对齐。项目堆放在容器主轴开始位置(main start)；
* flex-end：右对齐。项目堆放在容器主轴结束位置(main end)；
* center： 居中。项目沿着主轴居中排列；
* space-between：两端对齐，项目之间的间隔都相等。
* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
**/

align-items：决定容器内项目在交叉轴上对齐方式。默认为stretch。

align-items: flex-start | flex-end | center | baseline | stretch;
/**
* flex-start：交叉轴的起点对齐。
* flex-end：交叉轴的终点对齐。
* center：交叉轴的中点对齐。
* baseline: 项目的第一行文字的基线对齐。
* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
**/

align-content：决定容器内项目在交叉轴上内容与剩余空间对齐方式。默认为 stretch。

特别注意：该属性只对设置了`flex-wrap:wrap`的容器生效，并且容器里的元素构成了多行。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/**
* flex-start：与交叉轴的起点对齐。
* flex-end：与交叉轴的终点对齐。
* center：与交叉轴的中点对齐。
* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
* stretch（默认值）：轴线占满整个交叉轴。
**/

案例参考地址：https://codepen.io/pen/

2.项目

概念

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
相关属性
- order：定义项目在容器主轴方向上的排列顺序，数值越小排列越靠前。默认为 0 。
```
order: <integer>;
```

flex-grow：定义项目基于 flex-basis 放大比例，默认为 0 ，即便容器存在剩余空间，也不放大。不允许负值。

剩余空间：元素占据完容器空间后的布局空白

flex-grow: <number>; /* default 0 */
/**
* 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
* 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
**/

flex-shrink：定义项目在容器空间不足时的基于 flex-basis 缩小比例，默认为1，不允许负值。容器空间不足时该项目要缩小，并且项目内容会换行。只有在flex元素总和超出主轴才会生效。

flex-shrink: <number>; /* default 1 */
/**
* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
* 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
**/

flex-basis：可以理解成设置项目默认大小。定义项目分配多余空间之前，在主轴上占据的空间。默认为auto，即项目内容大小。
```
 flex-basis: <length> | auto; /* default auto */
```
如果容器内所有项目大小总和超过容器，不设置 wrap 的情况下会溢出容器：

flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex 有几种预定义的值：
- flex: initial 是把flex元素重置为Flexbox的初始值，它相当于 flex: 0 1 auto。
- flex: auto 等同于 flex: 1 1 auto,表明元素既可以拉伸也可以收缩。
- flex: none 可以把flex元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。
- flex: <positive-number> 常看到的 flex: 1 或者 flex: 2 等等。它相当于flex: 1 1 0或 flex:2 2 0。元素可以在以 flex-basis为0的基础上伸缩。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self：用于设置单个项目在交叉轴上对齐方式，可覆盖容器的 align-items属性，默认为 auto。如果值为auto，则计算值为父元素的 ' align-items ' 值，否则为指定值。
```
align-self: auto | flex-start | flex-end | center | baseline | stretch;
```

3.总结

以上把 Flex box 基本知识点做了大体的梳理，具体实战案例后面再更。。。

注：题图出处flexgrow