Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

flexbox

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.

like image 590
RoyS Avatar asked Sep 28 '14 15:09

RoyS


People also ask

How do you split flex items in CSS?

To create a gap between flex items, use the gap , column-gap , and row-gap properties. The column-gap property creates.

How do I align items side-by-side in CSS Flex?

With the existing markup, using flex-direction: column , you can't make those two "buttons" align side-by-side. One way is to change to row wrap and make all the input + label 100% width, which can be done with either width: 100% (used below) or flex-basis: 100% .

How do you show 3 items per row in Flexbox?

For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .


Video Answer


1 Answers

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;

like image 66
Nico O Avatar answered Sep 28 '22 06:09

Nico O