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

CssFlexbox

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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


<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

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;

Solution 2 - Css

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 > div
{
   flex: 1 0 50%;
}

to

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

Solution 3 - Css

For SCSS file you can write this way:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  >{
   flex: 1 0 50%;
}
&:first-child{
 flex: 0 1 50%;
}
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Output:

1             2
3
Categories
Recommended Css Solutions
Recommended Flexbox Solutions

Previous Solution:

How can I copy a conditional formatting from one document to another?

Google SheetsGs Conditional-Formatting

Next Solution:

Is there an equivalent of Scala's Either in Java 8?

JavaScalaJava 8

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRoySView Question on Stackoverflow
Solution 1 - CssNico OView Answer on Stackoverflow
Solution 2 - CssPeter WaegemansView Answer on Stackoverflow
Solution 3 - CssMd. Shafiqul IslamView Answer on Stackoverflow