嵌套Flexbox适配：如何让右侧容器仅空间不足时换行

我嵌套定义了Flexbox布局，希望编号为1、2、3的容器在桌面端显示在A容器右侧，仅在空间不足（如移动端场景）时换行至A容器下方。求实现该效果的方法，接受Bootstrap 4或5的解决方案。

原始代码：

<html lang="en-us">
  <style>
    body, div {font-family: sans-serif; font-size:100px}
  </style>
  <body>
    <div style="display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; ">
      <div id="letter" style="background-color:red; min-width:150px; min-height:400px; margin:10px;">A</div>
      <div id="numbers"
           style="display:flex; flex-flow:row wrap;
                  justify-content:flex-start; align-items:flex-start;
                  background-color:yellow">
        <div style="background-color:lightblue; min-width:300px; min-height:200px; margin:10px">1</div>
        <div style="background-color:lightblue; min-width:300px; min-height:180px; margin:10px">2</div>
        <div style="background-color:lightblue; min-width:300px; min-height:150px; margin:10px">3</div>
      </div>
  </body>
</html>

解决方案 #

原生Flexbox实现 #

问题核心是数字容器（#numbers）没有设置最小宽度，导致空间不足时它会先被压缩，而非整体换行到A容器下方。给#numbers添加min-width属性，值设为内部子元素最小宽度加边距（300px + 10px*2 = 320px），这样当父容器总宽度小于A容器（150+20）+数字容器最小宽度（320）时，数字容器就会自动换行。

修改后的代码：

<html lang="en-us">
  <style>
    body, div {font-family: sans-serif; font-size:100px}
  </style>
  <body>
    <div style="display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; ">
      <div id="letter" style="background-color:red; min-width:150px; min-height:400px; margin:10px;">A</div>
      <div id="numbers"
           style="display:flex; flex-flow:row wrap;
                  justify-content:flex-start; align-items:flex-start;
                  background-color:yellow; min-width:320px;">
        <div style="background-color:lightblue; min-width:300px; min-height:200px; margin:10px">1</div>
        <div style="background-color:lightblue; min-width:300px; min-height:180px; margin:10px">2</div>
        <div style="background-color:lightblue; min-width:300px; min-height:150px; margin:10px">3</div>
      </div>
  </body>
</html>

Bootstrap 5实现 #

利用Bootstrap的网格系统，通过响应式类实现自适应布局：

• 外层用.row作为弹性容器
• A容器用.col-md-auto：中等屏幕及以上自动适应宽度，移动端占满整行
• 数字容器用.col：占剩余宽度，内部再用.row排列1、2、3容器，确保移动端每个数字容器占满，桌面端自动排列

代码示例：

<html lang="en-us">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body, div {font-family: sans-serif; font-size:100px}
    #letter {min-height:400px; background-color:red; margin:10px;}
    #numbers .num-item {min-height:200px; background-color:lightblue; margin:10px;}
    #numbers .num-item:nth-child(2) {min-height:180px;}
    #numbers .num-item:nth-child(3) {min-height:150px;}
  </style>
  <body>
    <div class="row flex-wrap align-items-start">
      <div id="letter" class="col-md-auto">A</div>
      <div id="numbers" class="col bg-warning">
        <div class="row">
          <div class="col-md-12 num-item">1</div>
          <div class="col-md-12 num-item">2</div>
          <div class="col-md-12 num-item">3</div>
        </div>
      </div>
    </div>
  </body>
</html>

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