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.

Did you try just giving the first item a `min-width` of `100%`? — Mudlabs, Jul 13 '17 at 07:04

score 167 · Accepted Answer · edited Apr 18 '18 at 08:41

167

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;

edited Apr 18 '18 at 08:41

Lionel

90
1
9

answered Sep 28 '14 at 15:44

Nico O

13,762
9
54
69

The display is unchanged being still in 3 rows, the 2 items that should be in the second row occupy separate rows, making 3 rows all together. The 3 items contain about 6 lines of text across the page. – RoyS Sep 28 '14 at 16:36
I can not follow you like this. Please make a jsFiddle demo. – Nico O Sep 28 '14 at 16:37
OK, what I did was to add about 50 chars to each of the divs in your fiddle and this put the 3 divs in a column formation. The problem seems to be the amount of text in the container items – RoyS Sep 28 '14 at 16:43
I see. Check this new version: http://jsfiddle.net/73574emn/1/ i set the base size of each flex item to 50% (except for the first one). – Nico O Sep 28 '14 at 16:55
BTw as a check, I commented out the box-sizing rule. It made no difference. So is there any good reason to include it? – RoyS Sep 28 '14 at 17:31
Glad it Worked. The box-sizing property is pretty awesome. http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – Nico O Sep 28 '14 at 18:38
awesome !! just make sure the parent container has flex-direction: row , and flex-wrap: wrap. – Partha Roy Oct 11 '17 at 06:07

score 8 · Answer 2 · answered Sep 08 '15 at 09:11

8

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.

answered Sep 08 '15 at 09:11

Peter Waegemans

109
1
2

You are right, `border-box` or user agent default margins / paddings could have caused the trouble you mentioned, at least it did for me - this can be avoided f.i. by defining a universal selector that sets the `box-sizing`-property etc. accordingly - e.g. : ``* { box-sizing: border-box; margin: 0; padding: 0;} `` – Mayinx Jun 17 '21 at 12:49

score 0 · Answer 3 · answered Mar 22 '22 at 09:42

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

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

3 Answers3

Linked