3. Flex【弹性盒】

3. Flex【弹性盒】

1.弹性盒

display: flex;  // 块状弹性盒 
display: -webkit-flex;  // 弹性盒兼容 
display: inline-flex; // 行内弹性盒 

2.主轴排列方向

flex-direction: row;  // 默认：水平 
flex-direction: column; // 垂直排列 

3.换行方式

flex-wrap: nowrap;  // 默认：不拆行列 
flex-wrap: wrap;  // 必要时拆行列 

4.主轴对齐方式

justify-content: center;  // 主轴水平居中 
justify-content: space-between; // 两端对齐 
justify-content: space-around;  // 分散对齐 
justify-content: flex-start;  // 头部对齐 
justify-content: flex-end;  // 尾部对齐 

5.侧轴对齐方式

align-items: center;      // 主轴垂直对齐 
align-items: flex-start;  // 左/上对齐 
align-items: flex-end;    // 右/下对齐 
align-items: baseline;    // 基线对齐 

6.拆行后对其方式

align-content: flex-start; // 头部对齐 
align-content: flex-end; // 尾部对齐 
align-content: center;  // 主轴水平居中 
align-content: space-around; // 两端对齐 
align-content: space-between; // 分散对齐 

参考文档：https://www.cnblogs.com/hellocd/p/10443237.html