CSS学习笔记 —— flex 弹性盒子布局

1、启用弹性盒子

1. display:flex

2. display:inline-flex

2、父元素属性

1. flex-direction 排列方式

• row 从左到右横向排列（默认值）
• row-reverse 从右到左横向排列
• column 纵向排成一列
• column-reverse 从下往上排成一列

2. flex-wrap 换行选项

• nowrap 溢出时不换行
• wrap 换行
• wrap-reverse 反转warp排列

3. justify-content 横轴对齐方式

• flex-start 向行起始位置对齐
• flex-end 向行结束位置对齐
• center 居中对齐
• space-between 平均贴边分布，若只有一个元素，靠左
• space-around 平均留空分部，若只有一个元素，居中

4. align-items 纵轴对齐方式

• flex-start 向纵轴起始位置对齐
• flex-end 向纵轴结束位置对齐
• center 中间对齐
• baseline
• strech 伸展

5. align-content 堆叠伸缩行对齐方式

• flex-start 向起始位置堆叠
• flex-end 向结束位置堆叠
• center 中间堆叠
• space-bwtween 平均贴边分部
• space-around 平均留空分部
• stretch 伸展

3、子元素属性

1. order 定义排序

2. flex-grow 剩余空间分配比例

3. flex-shrink 超量空间收缩比例

4. flex-basis 伸缩基准值

5. flex 复合属性 flex:grow shrink basis

6. align-self 自身纵轴对齐方式