CSS布局-解决flex布局下多⾏元素既可以均匀对齐最后⼀⾏也可以从左到右排列⾸先，你有没有遇到过这种情况
你既想让它均匀分布，还想让最后⼀⾏从左向右排列
此时你的代码应该是这样的
.box {
display: flex;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;
}
}
再来看⼀下效果
接下来看⼀下flex和grid布局的区别
Flex布局是轴线布局，只能指定"项⽬"针对轴线的位置，可以看作是⼀维布局，Grid 布局则是将容器划分成“⾏"和“列”，产⽣单元格，然后指定"项⽬所在”的单元格，可以看作是⼆维布局，Grid布局远⽐ Flex布局强⼤。(不过存在兼容性问题，使⽤之前应看具体需求)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。