Flex布局

Flex布局 弹性布局

一、任何一个容器都可以指定为 Flex 布局：

display: flex;//块元素
display: inline-flex;//行内元素

1、flex-direction：项目的排列方向

flex-direction: row || row-reverse || column || column-reverse

2、flex-wrap：如果一条轴线排不下，如何换行

flex-wrap: nowrap || wrap || wrap-reverse

3、flex-flow: flex-direction flex-wrap

4、justify-content：项目在主轴上的对齐方式

justify-content: flex-start || center || flex-end || space-between || space-around || space-evenly

5、align-items：项目在交叉轴上如何对齐

align-items: flex-start || center || flex-end || baseline || stretch 

6、align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-content: flex-start || center || flex-end || space-between || space-around

二、Flex Items项目

1、order：项目的排列顺序。数值越小，排列越靠前，默认为0

2、flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大

3、flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

4、flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）

5、flex: flex-grow flex-shrink flex-basis

6、align-self: auto || flex-start || center || flex-end || stretch || baseline