CSS flex,如何在第一行显示一个项目,在下一行显示两个项目

Question

我想这是一个非常简单的问题,但是我无法在flex容器中获得3个项目以显示2行,一行在第一行,另一行在第二行.这是flex容器的CSS.它在一行显示3个项目,显然:)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

如果flex-wrap设置为wrap,则3列显示在一列中.我认为需要换行设置才能在多行显示容器项目.我已经尝试过这个CSS作为第一个容器项目,打算让它占据整个第一行,但它不起作用

div.intro_item_1 {
  flex-grow: 3;
}

我遵循了"CSS-Tricks"中的说明,但我真的不确定要使用哪种命令组合.任何帮助都会非常受欢迎,因为我对此感到困惑.

Answer 1

你可以这样做:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

这是一个演示:http://jsfiddle.net/73574emn/1/

一个"行"已满后,此模型依赖于换行.由于我们将第一个项目设置flex-basis为100%,因此它完全填充第一行.特别注意了flex-wrap: wrap;

Answer 2

Nico O给出的答案是正确的.但是,这无法在Internet Explorer 10到11和Firefox上获得所需的结果.

对于IE,我发现了变化

.flex > div
{
   flex: 1 0 50%;
}

至

.flex > div
{
   flex: 1 0 45%;
}

似乎可以做到这一点.不要问我为什么,我没有进一步讨论这个问题,但它可能与IE渲染边框或其他东西有关.

在Firefox的情况下,我通过添加解决了它

display: inline-block;

到项目.