如何使Flexbox响应？ [英] How to make flexbox responsive?

问题描述

我有一个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; b< / div> < div id = C> c< / div>< / div>  

解决方案

尽管我最初以为这不可能，但我可以想到一种选择。

将 div＃B 赋予一个荒谬的 flex-grow 值，并给出 div＃C just flex：1 0 300px

  div {padding：2em;}＃A {padding：0;显示：flex; flex-wrap：wrap;}＃B {flex：99;背景：粉红色；}＃C {flex：1 0 300px;背景：橙色；}  

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

I have a div with two elements that I want to stack horizontally. Div#C has fixed width, and div#B will fill up the rest of the space. However the contents of div#B might be fixed width (which is dynamic) or 100% width (of div#B).

The effect I want is, if the screen width is small enough such that, right before div#B and div#C start to overlap or if the width of div#B is small enough, I want div#B and div#C to stack vertically, and each have width 100% of div#A. The problem is if I use a media query, I have to give a fixed min width for it to stack horizontally. With a fixed width, it doesn't account for any fixed width content in div#B. Does anyone know how to fix this preferably only in CSS?

#A {
    display:flex;
}
#B {
    flex:1;
}
#C {
    width:300px
}

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

解决方案

Although I had initially thought this might not be possible there is one option I can think of.

Give div#B a ridiculous flex-grow value in comparison and give div#C just 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

When div#B eventually shrinks small enough to force wrapping, the flex-grow:1 on div#C wil cause it to expand to full width and the 'upper' div#B will now take up the full width also since it cannot expand past 100% width of that 'row'

这篇关于如何使Flexbox响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！