如何使 flexbox 响应式？

Posted 2023-03-06

【中文标题】如何使 flexbox 响应式？

【英文标题】：How to make flexbox responsive?

【发布时间】：2016-12-22 22:49:56

【问题描述】：

我有一个包含两个要水平堆叠的元素的 div。 div#C 具有固定宽度，而 div#B 将填满剩余的空间。但是 div#B 的内容可能是固定宽度（动态）或 100% 宽度（div#B）。

我想要的效果是，如果屏幕宽度足够小，以至于在 div#B 和 div#C 开始重叠之前，或者如果 div#B 的宽度足够小，我想要 div#B 和 div #C 垂直堆叠，每个宽度为 div#A 的 100%。问题是如果我使用媒体查询，我必须给它一个固定的最小宽度才能水平堆叠。对于固定宽度，它不考虑 div#B 中任何固定宽度的内容。有谁知道如何最好只在 CSS 中解决这个问题？

#A 
    display:flex;

#B 
    flex:1;

#C 
    width:300px

<div id="A">
    <div id="B">b</div>
    <div id="C">c</div>
</div>

【问题讨论】：

我认为这是不可能的。 CSS 无法检测到 flex-container 何时会换行……AFAIK 也无法检测到任何其他布局方法。

再一次，也许它可以...

【参考方案1】：

虽然我最初认为这可能是不可能的，但我能想到一个选择。

给div#B 一个可笑的flex-grow 值作为比较，给div#C 只是flex:1 0 300px

div 
  padding: 2em;

#A 
  padding: 0;
  display: flex;
  flex-wrap: wrap;

#B 
  flex: 99;
  background: pink;

#C 
  flex: 1 0 300px;
  background: orange;

<div id="A">
  <div id="B">Lorem ipsum dolor sit amet</div>
  <div id="C">c</div>
</div>

Codepen Demo

当div#B 最终缩小到足以强制换行时，div#C 上的flex-grow:1 将使其扩展到全宽，而“上”div#B 现在也将占据全宽，因为它不能扩大超过该“行”的 100% 宽度

【讨论】：

为什么你引用flex-grow 而代码却只是flex？我对 flex 了解不多，但很感兴趣

flex 的完整版 shorthand 属性有 3 个值是 flex-grow flex-shrink flex-basis 所以应该写成 flex: 99 0 auto 但最后两个是默认值所以他们可能会错过，我们可以写flex:99。

我在 div#B 中放了一个表，然后当我测试 div#C 时开始在 div#B 表上重叠。

您的问题中没有提到表格。表格在 flexbox 中可以有不同的行为。

【参考方案2】：

试试这个?

#A 
    display:flex;
    flex-flow: row wrap;

#B 
    flex-basis: 60%;

#C 
    flex-basis: 40%;



@media (max-width: 540px)
   #B 
        flex-basis: 100%;
        //whatever width you want in mobile view
    

    #c 
        flex-basis: 100%;
        //whatever width you want in mobile view
    

【参考方案3】：

我认为这是一个简单的方法

.container
        display:flex;
        flex-wrap: wrap;
      

      .container div 
        border:1px solid #ccc;
        padding: 1em  1em;
        flex: 1;
       

      

       

<div class="container">
  <div>
      <h4>
       First box
      </h4>
      <p>
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
         dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
      </p>
  </div>
  <div>
     <h4>
       Second box
      </h4>
      <p>
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
      </p>
  </div>
  <div>
     <h4>
       Third box
      </h4>
      <p>
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
      </p>
  </div>
</div>

【参考方案4】：

使用媒体查询来完成这项工作。将断点设置为 767px 或 992px 以垂直堆叠 div。