Question

标题并没有描述我的问题，但没有找到更好的问题。所以，我有一个包含3个div的div，我不是两个列，第一个是div A，第二个是div B和C，大屏幕上只有一个列，小屏幕上只有一个列。我可以使用@media，但我认为flex可以不用。

这就是我的尝试：

<div id="container">

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

</div>

#container
{
  border:1px solid #aaa;
  height:300px;
  width:500px;
  max-width:100%;
  display:flex;
  flex-flow:column;
  flex-wrap:wrap;  
}
#container > div
{
  border:1px solid #aaa;
  margin:2px;
  flex-grow:1;
  min-width:200px;
  height:10px;
}
#container > div:first-of-type
{
  height:300px;
  flex-grow:1;
}

Demo

我修改了高度以强制内容转到2列但是它永远不会转到onel colum。

Answer 1

只需删除最后一个css元素：

https://jsfiddle.net/j2brc3t3/1/

直播示例：

#container
{
  border:1px solid #aaa;
  height:300px;
  width:500px;
  max-width:100%;
  display:flex;
  flex-flow:column;
  flex-wrap:wrap;  
}
#container > div
{
  border:1px solid #aaa;
  margin:2px;
  flex-grow:1;
  min-width:200px;
  height:10px;
}

<div id="container">

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

</div>

Answer 2

#container {
  border: 1px solid #aaa;
  width: 600px;
  max-width: 100%;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
}

#in1 {
  background: #a1d;
  margin: 5px;
  height: 200px;
  flex-grow: 1;
  min-width: 200px;
}

#in2 {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  min-width: 200px;
}

#in2>div {
  background: #e25;
  flex-grow: 1;
}


/*
#in2 div:first-child {
  margin-bottom: 5px;
}
*/

<div id="container">

  <div id="in1">div1</div>
  <div id="in2">
    <div>div2</div>
    <div>div3</div>
  </div>

</div>

我发现了一个近乎解决方案：

Demo 它回答了我的问题，但显示了边距的新问题，我不需要容器周围的边距，内部div之间只有5px，如果有人有完美的解决方案......

Flex以固定尺寸包裹

2 个答案: