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

我跟着the instructions in "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;

到项目。

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

2 个答案: