CSS Flex相关属性(自我总结)

/*把容器做成flex弹性盒*/
display: flex;

容器属性

1. flex-direction：项目排列方向（主轴方向）

row：左对齐，横向排列（默认）

row-reverse：右对齐，反转横向排列

column：纵向排列

column-reverse：反转纵向排列

2.flex-wrap：当项目超出容器后，项目的换行方式

nowrap：不换行（默认值）

wrap：换行

wrap-reverse：反向换行

3.flex-flow：flex-direction和flex-wrap的复合属性

4.justify-content：设置项目在主轴的对齐方式

flex-start：项目在主轴的开头

flex-end：项目在主轴的结尾

center：项目在主轴的中间位置

space-between：两端对齐，项目之间的间隔都相等

space-around：每个项目的前后间隔都相等

space-evenly：每个项目之间和之前、之后平均分配剩余空间

5.align-items：设置交叉轴的对齐方式

stretch:拉伸项目适应容器交叉轴方向大小（不设置宽度或者高度才会拉伸）

flex-start：项目在交叉轴的开头

flex-end：项目在交叉轴的结尾

center：项目在交叉轴的中间位置

baseline：项目在交叉轴的基线上

6.align-content：多行排列时（需要设置flex-wrap属性才能生效），设置交叉轴的对齐方式

stretch:拉伸项目适应容器交叉轴方向大小（不设置宽度或者高度才会拉伸）

flex-start：项目在交叉轴的开头

flex-end：项目在交叉轴的结尾

center：项目在交叉轴的中间位置

space-between：在交叉轴方向两端对齐，项目之间的间隔都相等

space-around：在交叉轴方向，每个项目的前后间隔都相等

 

项目属性

1. order：设置项目的排序，可以是正值和负值，默认值为0，值越小顺序排列越靠前
2. flex-grow：容器有剩余空间时，项目剩余空间按比例放大，不能取负值，默认值为0，即不放大，当设置多个项目的flex-grow属性时，按照比例计算剩余空间实现项目的放大
3. flex-shrink：容器空间不足时，项目的缩小比例，默认值为1，即项目会缩小，不能取负值
4. flex-basis：设置项目伸缩值，可以是px，%，rem等，默认值是auto，即项目本身的大小
5. flex：flex-grow  flex-shrink  flex-basis的复合属性
6. align-self：设置项目自身在交叉轴上的对齐方式

auto：继承父元素的align-items属性，默认值

flex-start：在垂直轴的开头

flex-end：在垂直轴的结尾

center：在垂直轴的中间

stretch：在垂直轴方向拉伸

baseline：在垂直轴方向基线对齐