css-flex布局

当使用Flex布局时，可以使用以下属性来控制Flex项目的定位和排版。下面是一些Flex常用的属性：

1. display : 可以使用 display: flex; 来规定一个元素是Flex容器，内部的子元素是Flex项目。
2. flex-direction : 这个属性可以控制Flex项目的排列方向，可以有4种取值： row (水平方向，从左到右)、 row-reverse (水平方向，从右到左)、 column (垂直方向，从上到下)、 column-reverse (垂直方向，从下到上)。
3. justify-content : 这个属性可以控制Flex项目在main axis方向上的对齐方式，可以有5种取值： flex-start (靠左/上对齐)、 flex-end (靠右/下对齐)、 center (居中对齐)、 space-between (两端对齐)、 space-around (周围对齐)。
4. align-items : 这个属性可以控制Flex项目在cross axis方向上的对齐方式，可以有4种取值： flex-start (顶部对齐)、 flex-end (底部对齐)、 center (居中对齐)、 stretch (拉伸占满整个行或列)。
5. align-self : 这个属性可以控制单个Flex项目在cross axis方向上的对齐方式。该属性可以覆盖 align-items 属性的设置。
6. flex-wrap : 可以控制Flex项目是否换行，可以有3种取值： nowrap (不换行)、 wrap (换行)、 wrap-reverse (反向换行)。
7. flex-flow : 这个属性是 flex-direction 和 flex-wrap 属性的组合简写。
8. align-content : 这个属性可以控制多行或多列 Flex 项目在交叉轴方向上的对齐方式，当Flex容器有多行或多列时才会生效。可以有6种取值： flex-start (顶部对齐)、 flex-end (底部对齐)、 center (居中对齐)、 space-between (两端对齐)、 space-around (周围对齐)、 stretch (拉伸占满交叉轴)。
9. order : 这个属性可以定义Flex项目的排列顺序。它的值是一个整数，默认为0，数值越小，排列越靠前。
10. flex-grow : 这个属性定义了Flex项目在空间分配时所占据的比例，默认为0。如果所有的Flex项目的 flex-grow 的值都为1，那么它们平分剩余的空间。
11. flex-shrink : 这个属性定义了Flex项目在空间不足时所占据的比例，默认为1。如果所有的Flex项目的 flex-shrink 的值都为1，那么当空间不足时它们平均缩小。
12. flex-basis : 这个属性定义了Flex项目在分配多余空间之前所占据的空间，默认为 auto 。