CSS flex, как отобразить один элемент в первой строке и два на следующей строке

Это довольно простой вопрос, я думаю, но я не могу получить 3 элемента в контейнере flex для отображения в 2 строках, один в первой строке, а второй 2 во второй строке. Это CSS для контейнера flex. Он отображает 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-Tricks" , но я действительно не уверен, какую комбинацию команд использовать. Любая помощь была бы очень желанной, так как я озадачен этим.

Ответы

Ответ 1

Вы можете сделать что-то вроде этого:

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

Ответ 2

Ответ, данный Нико О, правильный. Однако это не дает желаемого результата в Internet Explorer 10-11 и Firefox.

В IE я обнаружил, что изменение

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

к

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

похоже, делает трюк. Не спрашивайте меня, почему, я не пошел дальше, но это могло бы иметь какое-то отношение к тому, как IE отображает рамку или что-то в этом роде.

В случае Firefox я решил его, добавив

display: inline-block;

к элементам.