一、弹性盒子的优点
页面变大变小时布局不会乱，且同一行每个盒子的大小可以自由伸缩。
二、伸缩盒子
首先把盒子编程伸缩盒子：给需要布局的子盒子的父盒子中加代码：
1 display: flex;
把盒子变成伸缩盒子后，默认水平从左向右排列。（主轴）
1. 改变主轴的方向
给伸缩父盒子添加
1 flex-direction: row; /*默认值，表示水平排列*/ 2 flex-direction: column; /*表示垂直排列*/
2. 设置主轴方向上子盒子的对齐方式
给伸缩父盒子添加
1 justify-content: center; /*表示子盒子全部中间对齐，中间无空*/ 2 justify-content: flex-start; /*表示在盒子的（最左侧）开头对齐*/ 3 justify-content: flex-end; /*表示在盒子的（最右侧）末尾对齐*/ 4 justify-content: space-around; /*表示盒子的两端及中间都留空*/ 5 justify-content: space-between; /*表示盒子的两端对齐，中间留空，（子盒子自适应）*/
3. 设置侧轴方向上子盒子的对齐方式
给伸缩父盒子添加
1 align-items: flex-start; /* 子盒子以侧轴的开始对齐（上对齐） */ 2 align-items: flex-end; /* 子盒子以侧轴的末尾对齐（底对齐） */ 3 align-items: center; /* 子盒子以侧轴的中间对齐（上下垂直居中对齐） */ 4 align-items: stretch; /* 子盒子在侧轴上根据父盒子高度自动拉伸，适应容器（但不能给子盒子设置height） */
4. 设置子盒子自己的伸缩比例
给子盒子添加
1 flex: 1; /* 根据子盒子数量，将 去掉定义的宽度width后 剩余的宽度等分，占1份 */
对于子盒子，若某个子盒子没有设置比例flex:n;，但其他子盒子设置了比例flex:n;，最后比例会按照剩余宽度分配。
剩余宽度分配 = 父盒子的总宽度 - 没有设置比例的子盒子的宽度。
1 <body> 2 <div class="box"> 3 <div></div> 4 <div></div> 5 <div></div> 6 </div> 7 </body>
1 .box { 2 width: 100%; 3 height: 600px; 4 border: 1px solid blue; 5 display: flex; 6 } 7 .box div { 8 width: 200px; 9 height: 100px; 10 } 11 .box div:nth-child(1){ 12 /* 使用.box div中定义的200px*/ 13 } 14 .box div:nth-child(2){ 15 flex: 2; /* 占2份 */ 16 } 17 .box div:nth-child(3){ 18 flex: 1; /* 占1份 */ 19 }
三、其他
1. 设置子盒子是否换行显示
1 flex-wrap: nowrap; /* 默认值，表示不换行，子盒子的宽度值自动适应父盒子，之前设置的宽度无效 */ 2 flex-wrap: wrap; /* 表示换行，子盒子的宽度使用之前设置的宽度，父盒子一行无法容纳时换行显示 */ 3 flex-wrap: wrap-reverse; /* 表示自动换行，但反转（从底端向上换行） */
2. 设置子盒子换行后的对齐方式
设置所有子盒子换行后的对齐方式：
1 align-content: stretch; /* 默认值 */
其他值：align-content: center / flex-start / flex-end / space-around / space-between
使用此元素时，父盒子中必须有以下属性：
1 display: flex; 2 flex-direciton: row; 3 flex-wrap: wrap;
3. 设置子盒子自己的对齐方式
设置指定的子盒子在侧轴上的对齐方式：
1 align-self: center; /* 加了这行属性的子盒子沿侧轴居中 */
4. 设置子盒子的排序方式
1 order: 0; /* 默认值为0。数值越小排列越靠前 */