如何使用flexbox实现元素自动占满空间并适配空余位置的弹性布局

实现思路 #

要实现元素自动占据可用空间、行内有空余位置时自动填充撑满的效果，核心是利用Flex布局的换行能力和子元素的弹性增长属性，不需要额外的JS计算，纯CSS即可实现。

完整代码示例 #

HTML结构 #

<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
  <div class="flex-item">项目4</div>
  <div class="flex-item">项目5</div>
</div>

CSS样式 #

/* 父容器配置 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 可选，自定义元素间间距 */
  padding: 16px;
}

/* 子元素配置 */
.flex-item {
  /* 核心属性，可根据需求调整最小宽度值 */
  flex: 1 1 150px;
  /* 以下为自定义装饰样式，可自行修改 */
  height: 100px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

核心属性说明 #

• flex-wrap: wrap：开启Flex容器的换行能力，元素总宽度超过容器宽度时会自动换到下一行，避免溢出。
• flex: 1 1 150px是三个属性的缩写：
  • flex-grow: 1：允许子元素在有剩余空间时自动增长，等分行内空余位置，实现补位效果。如果需要某个元素占比更大，可以单独给该元素设置更大的flex-grow值。
  • flex-shrink: 1：允许子元素在容器宽度不足时自动缩小，适配小屏幕场景。
  • flex-basis: 150px：设置子元素的最小基准宽度，可根据业务需求调整该值，控制一行默认能放的元素数量。
• gap：统一设置子元素的横向、纵向间距，不会导致宽度计算异常，比使用margin更便捷。

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