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

我猜这是一个非常简单的问题，但是我无法在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技巧”中的说明进行了操作，但是我真的不确定要使用哪种命令组合。任何帮助都将非常受欢迎，因为对此我感到困惑。

css flexbox

— 罗伊斯
source

你尝试只是给第一项min-width的100%？

— Mudlabs

Answers:

127

您可以执行以下操作：

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

一个“行”已满后，此模型依赖于换行。由于我们将第一项设置flex-basis为100％，因此它将完全填充第一行。特别注意flex-wrap: wrap;

— 尼科
source

显示仍保持3行不变，应该在第二行中的2项占据单独的行，总共3行。这3个项目在整个页面上包含约6行文本。

— RoyS 2014年

我不能这样追踪你。请制作一个jsFiddle演示。

— Nico O

好的，我要做的是在小提琴中的每个div中添加大约50个字符，这将3个div排列成列。问题似乎是容器项目中的文本量

— RoyS 2014年

我懂了。检查这个新版本：jsfiddle.net/73574emn/1我将每个flex项目的基本大小设置为50％（第一个项目除外）。

— Nico O

BTw作为检查，我注释掉了框大小规则。没关系。那么是否有充分的理由将其包括在内？

— RoyS

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;

的项目。

— 彼得·韦格曼斯
source