使用Flexbox布局能否让指定元素共享同一行？

当然可以做到！针对你这个Flex垂直布局里让特定元素同行的需求，我给你分享两种实用的解决方案：

这种方式通过给需要同行的元素套一个子Flex容器，改变它们的排列方向，同时调整元素宽度来适配外层容器：

修改后的CSS代码 #

.outer { 
  display: flex; 
  flex-direction: column; 
  margin-left: auto; 
  margin-right: auto; 
  width: 50px; 
} 
.outer .inner { 
  width: 50px; 
  height: 50px; 
  background-color: blue; 
  margin-bottom: 20px; 
  font-size: 24px; 
  color: #fff; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
/* 新增同行分组容器的样式 */
.inner-group {
  display: flex;
}
.inner-group .inner {
  width: 25px; /* 外层容器宽50px，每个子元素占一半宽度 */
  margin-bottom: 20px;
}

修改后的HTML代码 #

<div class="outer">
  <div class="inner">1</div>
  <!-- 把需要同行的元素放进分组容器里 -->
  <div class="inner-group">
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

这种方案的好处是逻辑清晰，后续要调整哪组元素同行，直接调整分组即可，非常容易维护。

如果你不想增加额外的DOM节点，可以把外层Flex的方向改为row并开启换行，通过设置元素的flex-basis来控制是否同行：

修改后的CSS代码 #

.outer { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; /* 允许元素换行 */
  margin-left: auto; 
  margin-right: auto; 
  width: 50px; 
} 
.outer .inner { 
  flex-basis: 100%; /* 默认每个元素占满一行 */
  height: 50px; 
  background-color: blue; 
  margin-bottom: 20px; 
  font-size: 24px; 
  color: #fff; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
/* 给需要同行的元素设置占一半宽度 */
.inner.col-half {
  flex-basis: 50%;
}

修改后的HTML代码 #

<div class="outer">
  <div class="inner">1</div>
  <div class="inner col-half">2</div>
  <div class="inner col-half">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

这种方案不需要额外嵌套容器，通过Flex的换行特性实现需求，适合对DOM层级有要求的场景。

两种方案都能完美实现你想要的布局效果，你可以根据自己的实际场景选择~

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