如何用Flex布局实现卡片填满容器且不超出设备宽度？

修改后的代码 #

CSS

/* 全局盒模型重置，避免元素尺寸计算混乱 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.services-container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1rem; /* 卡片之间的间距，替代margin更简洁 */
  padding: 1rem; /* 容器内边距，避免贴边 */
}

.services-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 250px; /* 核心：允许放大填满空间、允许缩小、最小宽度250px */
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
}

.services-card h3 {
  margin-bottom: 0.5rem;
}

HTML（结构无需改动，保持原结构即可）

<div class="services-container">
   <div class="services-card">
     <h3>Services 1</h3>
     <p>Services Information</p>
   </div>
   <div class="services-card">
     <h3>Services 2</h3>
     <p>Services Information</p>
   </div>
   <div class="services-card">
     <h3>Services 3</h3>
     <p>Services Information</p>
   </div>
   <div class="services-card">
     <h3>Services 4</h3>
     <p>Services Information</p>
   </div>
   <div class="services-card">
     <h3>Services 5</h3>
     <p>Services Information</p>
   </div>
<!--and more services-->
</div>

关键修改说明 #

• flex-wrap: wrap：原来的容器没有换行设置，卡片会一直挤在一行导致溢出，加上这个属性后，当卡片总宽度超过容器时会自动换行。
• flex: 1 1 250px：这是flex布局的核心属性，三个值分别代表：
  • flex-grow: 1：允许卡片在有多余空间时自动放大，填满容器的每行空间
  • flex-shrink: 1：允许卡片在空间不足时自动缩小，避免溢出
  • flex-basis: 250px：设置卡片的最小宽度，保证小屏幕上卡片不会太窄影响阅读
• gap：替代传统的margin来设置卡片间距，更简洁且不会出现边缘间距问题
• box-sizing: border-box：确保卡片的padding和border不会额外增加宽度，避免超出容器

适合新手的学习资源 #

• MDN Web Docs Flexbox 指南：详细讲解Flexbox的所有属性和用法，是最权威的官方文档，适合系统学习
• CSS Tricks Flexbox 完整指南：用可视化的方式展示Flexbox的各种布局场景，例子丰富，容易理解
• 前端入门教程中的Flexbox模块：很多免费的前端入门课程都会专门讲解Flexbox，跟着实操案例练习能快速上手

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