Flexbox布局需要注意问题

其他的布局如table，float等都不是设计来做网页布局的，而Flexbox是第一套专门为了网页布局而设计的方法。

flex布局的预设值为block，所以一开始设置了flex布局（display：flex）的元素都会独占一行。

Flex布局主要可以分为两部分：flex-container（整个弹性盒容器）和flex-items（弹性盒中的元素）；

flex全属性实时预览：http://flexbox.help/

Flex-container（弹性盒）相关属性

这些属性写在设定为flex-container的标签中；通过给标签添加：display：flex；可以使该标签成为一个flex-container。

1.flex-direction

设置flex-container内的items的排序方向，默认值为row（行/水平排序），其他属性值有：

column：列/竖直排序；

row-reverse：反向水平排序；

column-reverse：反向竖直排序；

不同的排序方向，主轴与交叉轴不一样：

image-20200609170510747

image-20200609170510747

2.justify-content

决定主轴的排序方向；有以下属性值：

center：主轴上居中；

flex-start：主轴起始方向开始排列（默认表示左）；

flex-end：主轴结束方向开始排列（默认表示右）；

space-around：空白环绕；

space-between：与around相似，只不过没有了最左和最右的空白；

space-evenly：空白平分；

3.align-item

决定交叉轴的排序方向；有以下属性值：

center：交叉轴上居中；

flex-start：交叉轴起始方向开始排列（当flex-direction为默认值row时，表示上）；

flex-end：交叉轴结束方向开始排列；（默认表示下）

space-around：空白环绕；

space-between：与around相似，只不过没有了最左和最右的空白；

space-evenly：空白平分；

justify-content：center与align-item：center配合使用可以使flex-container（弹性盒）内的items水平和垂直方向上居中。

4.flex-wrap

当弹性盒内的item过多时，该属性可以控制，是压缩每个item宽度不换行，还是保持每个item宽度换行；

nowrap：压缩item`宽度，不换行；

地址：https://www.cnblogs.com/AhuntSun-blog/p/13519246.html

wrap：不改变item宽度，换行；（换行后，会将弹性盒一分为二，所以两行item并不是挨在一起的）

5.flex-flow

该属性为flex-direction和flex-wrap组合的缩写；如：

flex-flow：row wrap；等效于flex-direction：row；flex-wrap：wrap