如何使用 flexbox 将三列布局变成两列布局（调整选项卡大小时）？答案

【问题标题】：How can I use flexbox to make a three column layout turn into a two column layout (when the tab is resized)?如何使用 flexbox 将三列布局变成两列布局（调整选项卡大小时）？
【发布时间】：2020-07-27 01:44:09
【问题描述】：

我的目标是使用 flexbox 创建三个响应式列。目前，当调整大小时，列可以从左到右或从上到下。我正在尝试使三列布局进入两列布局，第三列位于前两列下方。但是，第一列和第二列并不相邻。

我在谷歌上搜索并查看了其他示例并尝试实现它们，但我不确定为什么它仍然无法正常工作。

我该如何解决这个问题？提前致谢。

链接到我的代码笔：https://codepen.io/sbarclay7/pen/ZEQZvaj

html {
    height: 100%;
}
    
body {
    color: #FFFFFF; 
    text-align: center;
}


* { box-sizing: border-box; }


.wrapper {
    padding-top:2.1rem;
    display: flex;

    padding-bottom:2.2rem;
    max-width:40%;
    justify-content: center;
    margin:auto;  
}
    
.category {
    display: flex;
    flex-direction: column;
    width: 16rem;
    flex: 1; 
    background-color:#203a8a;
    border-radius: 0.7rem;
    border: 1.5px solid rgb(5, 30, 37);
    
    }
     
.flex {
    display: flex;
    flex-wrap: wrap; 
}
     

@media (max-width: 1000px) { 
    .wrapper {
      flex-direction: column;
      flex-flow: column wrap;

    }
    .category {
        width: 49%;
    }
  }


  @media (max-width: 700px) { 
    .wrapper {
      flex-direction: column;
    }
    .category {
        width: 100%;
    }
  }

   <div class="wrapper flex">
        
        <div class="category" style="flex-basis: 4rem;" >
          <h3>Header 1</h3>
          <p>a</p>
        </div>
    
        <div class="category"style="flex-basis: 4rem;" >
          <h3>Header 2</h3>
           <p>a</p>
        </div>
        
        <div class="category"style="flex-basis: 4rem;"> 
          <h3>Header 3</h3>
          <p>a</p>
        </div>
      </div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我注意到您通过使用媒体查询设置 flex: column 属性修改了 flex 属性的灵活性。这目前正在影响您正在调整大小的显示。

删除媒体查询中添加的 flex 属性，它应该可以正常工作。

【讨论】：

谢谢！我这样做了，它奏效了。我试图让布局变成“更早”的两列布局，并且在文本到达框的边缘之前。你知道我该怎么做吗？
@SusanB.你能说得清楚一点，让我更好地理解吗？
是的，很抱歉。我不确定如何解释它，所以这里有一个理论示例。现在，当屏幕为 700 像素宽时，三列布局变为两列布局。当屏幕为 1200 像素宽时，我希望三列布局变成两列布局。我尝试更改媒体查询最大宽度数字，但没有奏效。我通过使用 white-space: nowrap 并将 &ensp 放在框中的文本“修复”它，但我认为我所做的不是一个好方法。
@SusanB.更好的选择是更改包装元素的最大宽度。目前设置为 40%。您可以更改为租赁价值，这应该可以解决问题。如果还有任何问题，请告诉我。
@SusanB.很抱歉给您带来麻烦，我的意思是输入“较小”的值。