如何实现嵌套Flexbox布局？左侧容器输入框多行排版需求

可以通过给左侧Flex容器设置换行规则，并针对性控制输入框的宽度来实现需求，具体代码示例如下：

HTML结构 #

<div class="container">
  <div class="left-flex">
    <input type="text" class="half-width" placeholder="输入框1">
    <input type="text" class="half-width" placeholder="输入框2">
    <input type="text" placeholder="输入框3">
    <input type="text" placeholder="输入框4">
  </div>
  <div class="right-flex">
    <!-- 右侧内容 -->
  </div>
</div>

CSS样式 #

.container {
  display: flex;
}
.left-flex, .right-flex {
  flex-basis: 50%;
  padding: 10px;
}
.left-flex {
  display: flex;
  flex-wrap: wrap; /* 开启换行 */
  gap: 8px; /* 输入框之间的间距 */
}
.left-flex .half-width {
  flex: 0 0 calc(50% - 4px); /* 占据一半宽度，减去gap的一半避免溢出换行 */
  box-sizing: border-box; /* 确保内边距、边框不影响宽度计算 */
}
.left-flex input:not(.half-width) {
  flex: 0 0 100%; /* 后续输入框占满整行 */
  box-sizing: border-box;
}

关键说明 #

• flex-wrap: wrap 是核心，让左侧容器内的元素在空间不足时自动换行
• 前两个输入框通过calc(50% - 4px)计算宽度，减去gap的一半，保证两个元素能在一行放下
• box-sizing: border-box 避免输入框的内边距、边框导致宽度超出容器

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