如何使 flexbox 响应式？

Question

我有一个包含两个要水平堆叠的元素的 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>

Answer 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% 宽度

Answer 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
    }
}

Answer 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>

Answer 4

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