flex弹性布局是css3中的一个有效的布局方式。引入弹性盒布局模型（flex box）的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。或者说当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。
1. 术语
- 容器: 具有
display:flex属性元素 - 项目: flex 容器的”子元素”
- 主轴: 项目排列的轴线
- 交叉轴: 与主轴垂直的轴线
2. 容器属性
| 序号 |
属性 |
描述 |
| 1 |
flex-flow |
主轴方向与换行方式 |
| 2 |
justify-content |
项目在主轴上的对齐方式 |
| 3 |
align-items |
项目在交叉轴上的对齐方式 |
| 4 |
align-content |
项目在多行容器中的对齐方式 |
3. 项目属性
| 序号 |
属性 |
描述 |
| 1 |
flex |
项目的缩放比例与基准宽度 |
| 3 |
align-self |
单个项目在交叉轴上的对齐方式 |
| 4 |
order |
项目在主轴上排列顺序 |
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex的属性</title> <style> * { box-sizing: border-box; } :root { font-size: 10px; } body { font-size: 1.6rem; } .container { /* 转为flex布局 */ display: flex; height: 40rem; border: 1px solid #000; } /* 项目样式 */ .container > .item { width: 10rem; /* height: 15rem; */ background-color: lightgreen; border: 1px solid #000; } .container { flex-flow: row nowrap; /* 项目在主轴上的对齐方式: justify-content */ /* 1. 将所有项目看成一个整体来处理 */ justify-content: flex-start; justify-content: flex-end; justify-content: center; /* 2. 将所有项目看成一个个独立的个体来处理 */ justify-content: space-between; /* 二端对齐 */ justify-content: space-around; /* 分散对齐 */ justify-content: space-evenly; /* 平均对齐 */ } /* 项目在交叉轴上的对齐方式: align-items */ .container { align-items: stretch; //拉伸 align-items: flex-start; align-items: flex-end; align-items: center; } /* justify-content: 项目在主轴上的对齐方式 align-items: 项目在交叉轴上的对齐方式 */ .container { flex-flow: row wrap; /* 多行容器中对齐时,主轴是没有剩余空间的 */ /* 换行后,如果需要设置对方方式,就要求交叉轴上必须要有剩余空间 */ align-content: stretch; /* 将交叉轴上所有项目看成一个整体 */ align-content: flex-start; align-content: flex-end; align-content: center; /* 看成个体 */ /* 二端对齐 */ align-content: space-between; /* 分散对齐 */ align-content: space-around; /* 平均对齐 */ align-content: space-evenly; } </style> </head> <body> <div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> <div class="item">item7</div> <div class="item">item8</div> </div> </body></html>
