如何使tan样式段落置于H3下方并维持两行Flex布局？

核心问题是你把标题和对应段落拆成了独立的flex子元素，导致它们在横向布局里分散开了。要实现每个标题下方跟着对应段落，同时保持两行三列的布局，需要调整结构和CSS：

步骤1：调整HTML结构 #

把每组标题和段落包裹在同一个容器里，让每组内容作为整体排列：

<div class="details_container">  
    <div class="feature-item">
        <h3 class="bold_container">A Massive 1.5 Inch Touch Screen</h3> 
        <span class="paragraph">Size is what matters when it comes to a smart watch screen. Read all your notifications with plenty of space.</span>
    </div>
    <div class="feature-item">
        <h3 class="bold_container">Mix and Match Designs</h3> 
        <span class="paragraph">Personalize your watch face to match your own unique style with many combinations of background images, clock styles and colors.</span>
    </div>
    <div class="feature-item">
        <h3 class="bold_container">Water Resistant up to 7 Feet</h3>
        <span class="paragraph">IP68 Weatherproof rating. Fit to withstand dust, dirt and sand and resistant to submersion up to a maximum depth of 7 feet underwater for up to 30 minutes.</span>
    </div>
</div>
<div class="details_container">
    <div class="feature-item">
        <h3 class="bold_container">Tracking your Steps, Heart Rate & Sleep.</h3> 
        <span class="paragraph">Check out your step progress during the day with the in app-tracker. Keep an eye on your heart rate easily and conveniently. And when you’re ready for your head to hit the pillow, track that too. </span>
    </div>
    <div class="feature-item">
        <h3 class="bold_container">Notifications from Popular Apps</h3> 
        <span class="paragraph">Get all your notifications from all your accounts conveniently on your wrist</span>
    </div>
    <div class="feature-item">
        <h3 class="bold_container">Up to 10 Days of Battery Life</h3> 
        <span class="paragraph">With a battery capacity up to 300mAh, you’ll have no problem getting through the week with plenty of charge to spare.</span>
    </div>
</div>

步骤2：修改CSS样式 #

调整flex容器的换行属性，给每个模块设置宽度，让内部内容垂直排列：

.details_container {
  display: flex;
  flex-wrap: wrap; /* 允许子项换行，实现两行布局 */
  justify-content: space-between; /* 模块之间均匀分布 */
  gap: 1rem; /* 模块之间的间距 */
  background-color: lavender;  
  padding: 1rem; /* 避免内容贴容器边缘 */
}

.feature-item {
  flex: 0 1 31%; /* 每个模块占容器宽度31%，刚好每行放3个 */
  display: flex;
  flex-direction: column; /* 内部标题在上，段落在下 */
}

.paragraph{
  background-color: tan;
  display: block; /* 让span变成块级元素，背景色铺满宽度 */
  margin-top: 0.5rem; /* 标题和段落之间的间距 */
  padding: 0.5rem; /* 段落内边距，提升可读性 */
}

关键说明 #

• flex-wrap: wrap让flex容器子项在一行放不下时自动换行，实现两行布局
• feature-item作为每组内容的容器，通过flex-direction: column强制标题和段落垂直排列
• flex: 0 1 31%保证每个模块的宽度稳定，同时留出间距，刚好每行容纳3个模块

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