|
前言
使用flex布局时，弹性子元素默认是排列在一行的；
但是如果子元素的个数超过了弹性容器的长度，则需要进行换行；
使用方式
a
b
c
d
...
.flexContainer {
display: flex;
flex-direction: row;
background-color: gray;
width: 800px;
height: 50px;
}
.flexItem {
width: 250px;
height: 20px;
color: white;
text-align: center;
}
未使用换行之前的展示
展示
1.基本使用wrap
.flexContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: gray;
width: 800px;
height: 50px;
}
截图
wrap的其他属性值
nowrap：不适用，默认
wrap：换行
wrap-reverse：反转wrap排列
initial：
inherit：
2.修复flex-wrap的对齐行为align-content
align-content属性用于修改 flex-wrap 属性的行为。类似于align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
截图
|