CSS flex，如何在第一行显示一个项目，在下一行显示两个项目 [英] CSS flex, how to display one item on first line and two on the next line

问题描述

这是一个很简单的问题，我想，但我不能得到3个项目在flex容器中显示在2行，一个在第一行和其他2在第二行。这是flex容器的css。它显示在一行上的3个项目，显然：）

This is a pretty simple question, I guess, but I can't get 3 items in the flex container to display in 2 rows, one in the first row and the other 2 in the second row. This is the css for the flex container. It displays the 3 items on a single line, obviously :)

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

}

设置为wrap，则3个项目显示在一列中。我认为需要换行设置来显示几行上的容器项。
我试过这个CSS的第一个容器项，打算让它占据整个第一行，但它不工作

If flex-wrap is set to wrap, then the 3 items are displayed in a column. I thought the wrap setting was needed to display container items on several lines. I've tried this CSS for the first container item, intending to have it occupy the whole of the first row, but it didn't work

div.intro_item_1  {
  flex-grow: 3;
}

我按照CSS-Tricks中的说明http://css-tricks.com/snippets/css/a-guide-to-flexbox/但我真的不知道使用哪个命令组合。任何帮助将是非常欢迎，因为我困惑的这一点。

I've followed the instructions in "CSS-Tricks" http://css-tricks.com/snippets/css/a-guide-to-flexbox/ but I'm really not sure which combination of commands to use. Any help would be very welcome as I'm puzzled by this.

推荐答案

您可以这样做：

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

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

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

使用此类HTML：

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

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

Here is a demo: http://jsfiddle.net/73574emn/1/

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

This model relies on the line-wrap after one "row" is full. Since we set the first item's flex-basis to be 100% it fills the first row completely. Special attention on the flex-wrap: wrap;

这篇关于CSS flex，如何在第一行显示一个项目，在下一行显示两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！