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