display:flex 弹性布局

https://www.cnblogs.com/xuyuntao/articles/6391728.html

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的

float

、

clear

和

vertical-align

属性将失效。

采用Flex布局的元素，称为Flex容器（flex
container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做

main start

，结束位置叫做

main
end

；交叉轴的开始位置叫做

cross start

，结束位置叫做

cross
end

。项目默认沿主轴排列。单个项目占据的主轴空间叫做

main size

，占据的交叉轴空间叫做

cross
size

。

以下6个属性设置在容器上：

 

flex-direction　　容器内项目的排列方向(默认横向排列)　　
flex-wrap　　容器内项目换行方式
flex-flow　　以上两个属性的简写方式
justify-content　　项目在主轴上的对齐方式
align-items　　项目在交叉轴上如何对齐
align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。