实现两个flex容器并排显示的问题排查与解决

嘿，我明白你遇到的困扰了——明明给每个.wrapper设了40%宽度，它们却还是各自占满整行，没法并排，剩下的空间全变成了margin留白。这是因为每个.wrapper本身是flex容器，但它在父元素眼里仍然是块级元素，块级元素默认会独占一行，所以即使你设置了宽度，它们还是会自动换行。

下面给你两个可行的解决方案，按需选择：

方案一：给外层容器添加flex布局（推荐） #

这是最稳妥、最灵活的方法，通过给两个.wrapper的父容器设置display: flex，让它们在水平方向排列。

修改后的代码： #

CSS

/* 新增父容器样式 */
.wrapper-group {
  display: flex;
  gap: 20px; /* 可选：给两个容器之间添加固定间距，比margin更易维护 */
  /* 如果需要让容器在空间不足时自动换行，可以加上 flex-wrap: wrap; */
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 40%;
  border: 1px solid black;
}

/* 如果你需要内部的.column也并排显示，可以给.info加flex布局 */
.info {
  display: flex;
  gap: 15px;
}

HTML

<div class="wrapper-group">
  <div class="wrapper">
    <div class="title">Test Title</div>
    <div class="info">
      <div class="column"> <b>1</b> <span>One</span> </div>
      <div class="column"> <b>2</b> <span>Two</span> </div>
    </div>
  </div>
  <div class="wrapper">
    <div class="title">Test Title</div>
    <div class="info">
      <div class="column"> <b>1</b> <span>One</span> </div>
      <div class="column"> <b>2</b> <span>Two</span> </div>
    </div>
  </div>
</div>

这个方法有效的原因：父容器变成flex容器后，它的直接子元素（你的.wrapper）会成为flex项，默认在同一行排列，各自的40%宽度设置会正常生效，剩下的20%空间（加上可选的gap）会自动分配为留白。

方案二：把.wrapper改成inline-flex #

如果你不想额外添加父容器，可以将.wrapper的display从flex改成inline-flex。这样它会像行内元素一样并排显示，同时保持内部的flex布局（flex-direction: column）。

修改后的CSS： #

.wrapper {
  display: inline-flex; /* 关键修改 */
  flex-direction: column;
  width: 40%;
  border: 1px solid black;
  margin-right: 5%; /* 可选：添加容器间的间距 */
}

⚠️ 注意：inline-flex元素会受HTML中的空白字符影响（比如两个.wrapper之间的换行），可能会产生额外的小间距。如果要避免这个问题，可以把两个.wrapper的HTML代码写在同一行，或者用方案一的父容器gap属性更省心。

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