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 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      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      I ve followed the instructions in  CSS-Tricks  but I m really not sure which combination of commands to use  Any help would be very welcome as I m puzzled by this

User · Answer

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  gt  div      flex  1 0 50       to   flex  gt  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

User · Answer

You can do something like this    x000D   x000D   flex   x000D    display  flex  x000D    flex-direction  row  x000D    flex-wrap  wrap  x000D    x000D   x000D   flex gt div   x000D    flex  1 0 50   x000D    x000D   x000D   flex gt div first-child   x000D    flex  0 1 100   x000D    x000D   lt div class  flex  gt  x000D     lt div gt Hi lt  div gt  x000D     lt div gt Hello lt  div gt  x000D     lt div gt Hello 2 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

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

Examples related to css

Examples related to flexbox