Flexbox适配每行1、2或3个项目的布局实现咨询

我整理了一个实用的基础Flexbox实现方案，它默认支持3列布局，当内容项只有2个或者1个时，布局会自动填充剩余空间，完美适配当前的显示需求：

CSS 核心代码 #

.grid3 { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
}
.grid3-item { 
  flex-basis: 33.333%; 
  text-align: center; 
  flex: 1; 
  background: grey; 
}

HTML 结构示例 #

<div class="grid3">
  <div class="grid3-item"> Some Content </div>
  <div class="grid3-item"> Some Content </div>
  <div class="grid3-item"> Some Content </div>
</div>

简单说下关键属性的作用：

• flex-wrap: wrap 保证内容项在容器空间不足时自动换行
• flex: 1 让每个item能自动分配容器的剩余空间，所以当item数量少于3个时，它们会自动撑满整个容器宽度
• flex-basis: 33.333% 为3列布局设置了基础宽度，搭配flex:1实现了自适应的弹性效果

内容的提问来源于stack exchange，提问作者user779681