0507 Flex弹性布局

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

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

Flex容器的属性

flex-direction(定义项目的排列方向): 

row(默认值，主轴为水平方向，起点在左端)

row-reverse(主轴为水平方向，起点在右端)

column(主轴为垂直方向，起点在上沿)

column-reverse(主轴为垂直方向，起点在下沿)

flex-wrap(如果一条轴线排不下，如何换行):

nowrap(默认，不换行)

wrap(换行，第一行在上方)

wrap-reverse(换行，第一行在下方)

flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content(定义项目在主轴上的对齐方式)：

flex-start(默认，左对齐)

flex-end(右对齐)

center(居中)

space-between(两端对齐，项目之间间隔相等)

space-around(每个项目两侧间隔相等，所以项目之间间隔比项目与边框间距大一倍)

align-items(定义项目在交叉轴上如何对齐，假设交叉轴从上到下):

flex-start(交叉轴的起点对齐)

flex-end(交叉轴的终点对齐)

center(交叉轴的中点对齐)

baseline(项目的第一行文字的基线对齐)

stretch(默认，如果项目未设置高度或设为auto，将占满整个容器的高度)

align-content(定义多根轴线对齐方式):

flex-start(交叉轴的起点对齐)

flex-end(交叉轴的终点对齐)

center(交叉轴的中点对齐)

space-between(与交叉轴两端对齐，轴线之间的距离平均分布)

space-around(每个轴线两侧间隔相等，轴线之间间隔比轴线与边框间距大一倍)

stretch(默认，轴线占满整个交叉轴)  

    

项目的属性

order(定义项目的排列顺序，数值越小，排列越靠前，默认为0)

flex-grow(定义项目放大比例，默认为0，存在剩余空间，也不放大)

flex-shrink(定义项目缩小比例，如果空间不足，项目将缩小)

flex-basis(定义在分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目本来大小)

align-self(允许单个项目有与其他项目不一样的对齐方式,可覆盖align-item属性。默认值为auto)