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 技巧”中的说明，但我真的不确定使用哪种命令组合。任何帮助将是非常受欢迎的，因为我对此感到困惑。

179256 次浏览
小开
最佳答案

You can do something like this:

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

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

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;

小开

The answer given by Nico O is correct. However this doesn't get the desired result on Internet Explorer 10 to 11 and Firefox.

For IE, I found that changing

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

to

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

seems to do the trick. Don't ask me why, I haven't gone any further into this but it might have something to do with how IE renders the border-box or something.

In the case of Firefox I solved it by adding

display: inline-block;

to the items.

小开 
For SCSS file you can write this way:


.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
>{
flex: 1 0 50%;
}
&:first-child{
flex: 0 1 50%;
}
}


<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Output:

1             2
3

提交答案