CSS flex, how to display one item on first line and two on the next line

Question

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

Answer 1

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%;
}

  
Hi
  
Hello
  
Hello 2

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;