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

这是一个非常简单的问题，我想，但我无法在flex容器中获得3个项目以显示2行，一个在第二排第一排，另外两排。这是flex容器的CSS。它显示了3项在一行上，显然:)CSS flex，如何在第一行显示一个项目，如何在下一行显示两个项目

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"，但我真的不知道哪些命令组合使用。任何帮助将非常受欢迎，因为我对此感到困惑。

来源

2014-09-28 RoyS

您是否尝试给第一个项目添加'100％'的'min-width'？ – Paralellos 2017-07-13 07:04:02

你可以做这样的事情：

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

这种模式后，依赖于线缠绕一个“行”已满。由于我们将第一个项目的flex-basis设置为100％，因此完全填充第一行。特别注意flex-wrap: wrap;

来源

2014-09-28 15:44:22

显示不变仍然在3行中，应该在第二行中的2项占据不同的行，使得3行全部在一起。这3个项目在页面中包含约6行文字。 – RoyS 2014-09-28 16:36:51

我不能像这样跟着你。请做一个jsFiddle演示。 – 2014-09-28 16:37:53

好的，我所做的就是在你的小提琴的每个div上添加大约50个字符，并将3个div放入列中。问题似乎是在容器项目的文字量 – RoyS 2014-09-28 16:43:28

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;

的项目解决了这个问题。

来源

2015-09-08 09:11:54

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

回答

相关问题