Flex-box: row布局未按预期生效，如何实现三列自动换行？

问题根源 #

你当前的布局失效主要有两个核心问题：

• .row-one 设置了 width: 100%，导致每个卡片直接占满整行，根本没有换行的空间
• 容器的 align-content: space-between 配置在内容不足两行时不会产生预期的间距效果，反而可能干扰布局

修复方案 #

以下是调整后的完整代码，直接替换原有CSS和HTML即可实现每行3个卡片、自动换行的效果：

修改后的CSS

/* 卡片父容器设置flex布局 */
#kitchen-hacks {
    padding-top: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px; /* 卡片之间的间距，替代margin更简洁 */
    justify-content: space-between; /* 每行两端对齐，剩余空间分配在卡片间 */
}

/* 卡片样式：每行3个，预留间距后设置宽度为31%左右 */
.row-one {
    flex-basis: 31%; /* 适配flex布局的宽度设置，比width更灵活 */
    box-sizing: border-box; /* 确保内边距/边框不会超出宽度 */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee; /* 可选，方便查看卡片边界 */
}

/* 标题独占整行 */
#kitchen-hacks h2 {
    text-align: center;
    margin-bottom: 15px;
    border: solid black;
    border-radius: 10px;
    flex-basis: 100%; /* 强制标题占满一行，不和卡片同排 */
    padding: 10px;
}

/* 图片自适应卡片宽度 */
#kitchen-hacks img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* 段落样式优化 */
#kitchen-hacks p {
    margin: 0;
    line-height: 1.5;
}

修改后的HTML

<div class="flex-div">
  <div id="kitchen-hacks"> 
    <h2 id="hacks"> Kitchen Hacks</h2>
    <div class="row-one" style="order: 4"> 
      <img src="/assets/images/kitchen-hack.one.png" alt="Chalk board on the inside of a shelf with measuring cups hanging from it"> 
      <p> Place a chalkboard and hangers on the inside of your kitchen shelf to store measuring cups the fashion way. </p> 
    </div>
    <div class="row-one" style="order: 2">
      <img src="/assets/images/kitchen-hack-two.png" alt="A shelf inside a shelf with plates on it"> 
      <p> Store shelves in your shelves to optimize space and to better take advantage of the empty space not used. </p> 
    </div>
    <div class="row-one" style="order: 3">
      <img src="/assets/images/kitchen-hack-three.png" alt="Coffee pouring into an ice tray">
      <p>Fill an ice tray with coffee so that you can enjoy your coffee without watering it down. </p> 
    </div> 
    <div class="row-one" style="order: 1"> 
      <img src="/assets/images/kitchen-hack-four.png" alt="Spices attached to the fridge with magnets"> 
      <p> Put magnets under your spices to make them stick to the fridge. That way you can multitask</p>
    </div>
    <div class="row-one" style="order: 5">
      <img src="/assets/images/kitchen-hack-five.png" alt="Kitchen sink area"> 
      <p> Using your sink as a temporary chopping surface frees the rest of your counter for other cooking steps. </p> 
    </div>
    <div class="row-one" style="order: 6">
      <img src="/assets/images/kitchen-hack-six.png" alt="An egg in a glass of water and two eggs beside the glass">
      <p> Fill a tall glass of water and lower an egg in it. If it sinks to the bottom, the egg is fresh. If it floats to the top, it’s time to toss it </p> 
    </div>
  </div>
</div>

关键调整说明 #

1. 容器层级修正：把flex样式直接加到#kitchen-hacks（卡片的直接父容器）上，避免层级混淆
2. 卡片宽度调整：用flex-basis:31%替代width:100%，预留出间距空间，确保每行刚好放下3个卡片
3. 标题布局控制：给标题设置flex-basis:100%，强制它独占一行，不影响卡片排列
4. 间距优化：用gap属性控制卡片间距，避免外边距折叠问题，代码更简洁
5. 图片自适应：让图片宽度100%填充卡片，保证不同尺寸图片的布局一致性

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