首先,你有没有遇到过这种情况
你既想让它均匀分布,还想让最后一行从左向右排列
此时你的代码应该是这样的
.box {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
.box-info {
position: relative;
width: 153px;
height: 140px;
}
}
解决办法
.box {
display: grid;
justify-content: space-evenly;
grid-template-columns: repeat(auto-fill, 153px);
grid-gap: 10px;
.box-info {
position: relative;
width: 153px;
height: 140px;
}
}
//针对子盒子自适应宽度可这样写
.box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, auto));
grid-gap: 10px;
.box-info {
position: relative;
min-width: 200px;
height: 140px;
}
}
再来看一下效果
接下来看一下flex和grid布局的区别
Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局,Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局,Grid布局远比 Flex布局强大。(不过存在兼容性问题,使用之前应看具体需求)