互联网技术 · 2024年2月14日

flex布局解决末尾不足数量自动两端排列问题

flex布局,当最后一行数量不够时,会出现下面布局

flex布局解决最后一排数量不够自动向两端排列问题

那么要实现下面如下效果怎么操作呢:

flex布局解决最后一排数量不够自动向两端排列问题

方法一:仅适用于三列布局

列表

.item-flex{    display: flex;    flex-wrap: wrap;    justify-content:space-between;    text-align: justify;  }  .item-flex:after{    content: ;    width: 30%;  }  .item-list{    width:30%;  }

方法二:适用于四列、五列…更多情况

列表
 

.item-flex{  display: flex;  flex-wrap: wrap;  justify-content:space-between;  justify-items: center;  text-align: justify;}.list{  content: ;  width: 240px;  border:1px solid transparent;  padding: 5px;  overflow: hidden;}.item-list{  width:240px;  border:1px solid #ff6600;  margin-bottom: 10px;  padding: 10px 5px;  display: flex;  justify-content: center;}

这里的 row 即是每列元素的个数,4列,5列。。。更改这个值即可

文章来源:田珊珊个人博客

来源地址:http://www.tianshan277.com/832.html

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册