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

问题描述

这是一个很简单的问题，我想，但我不能得到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中的说明

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，如何在第一行显示一个项目，在下一行显示两个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！