How to Display Flexbox Items in Two Rows Instead of One

Is it possible to display flexbox items in two rows instead of one?

You can do this using CSS grid:

.items-list {
  display: grid;
  grid-template-rows: 50px 50px; /* 2 rows of 50px */
  grid-auto-flow: column;  /* a column flow */
  grid-auto-columns:100px; /* each column will 100px of width */
  grid-gap: 5px;
  overflow: auto;
}
.item {
  border:2px solid red;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

How to evenly divide flex box items into two rows?

UPDATE: Try CSS-GRIDS, that's more powerful and you need pretty less code as well :)

Setting 2 rows instead of 2 columns:)

.flexbox {
    display: grid;
    grid-template-rows:repeat(2,150px);
    grid-auto-flow: column; 
    column-gap:1rem;
    row-gap:10px;
}

.flex-item {   
    flex-basis: 280px;
    flex-shrink:none;
    height: 150px;
    background:red;
    margin-right:10px;
    margin-bottom:10px;
}

<div class="flexbox">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Arrange 2 items per row using flexbox

You can give flex: 50% to children divs without touching .item

.item {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
  /*demo*/
  box-shadow: 0 0 0 1px black;
  margin-bottom: 10px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Flexbox: 4 items per row

You've got flex-wrap: wrap on the container. That's good, because it overrides the default value, which is nowrap (source). This is the reason items don't wrap to form a grid in some cases.

In this case, the main problem is flex-grow: 1 on the flex items.

The flex-grow property doesn't actually size flex items. Its task is to distribute free space in the container (source). So no matter how small the screen size, each item will receive a proportional part of the free space on the line.

More specifically, there are eight flex items in your container. With flex-grow: 1, each one receives 1/8 of the free space on the line. Since there's no content in your items, they can shrink to zero width and will never wrap.

The solution is to define a width on the items. Try this:

.parent {  display: flex;  flex-wrap: wrap;}
.child {  flex: 1 0 21%; /* explanation below */  margin: 5px;  height: 100px;  background-color: blue;}

<div class="parent">  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div>  <div class="child"></div></div>

How can I vertically center flexbox with two rows?

I hope I understood your question correctly...

To center your contents vertically, you need a wrapper element that has the full height of the window. So in my example below there's a "wrapper" element with 100% height which has display: flex, flex-direction: column; and justify-content: center in order to center it's contents vertically.

Also, for the height: 100% to be effective, you also need to apply that to all parent elements, in this case html and body:

html,
body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.col {
  flex-basis: 50%;
}

<div class="wrap">
  <div class="row">
    <div class="col">Header1</div>
    <div class="col">Header2</div>
  </div>
  <div class="row">
    <div class="col"><button>Click here</button></div>
    <div class="col"><button>Click here</button></div>
  </div>
</div>

How to display 3 items per row in flexbox?

Flex container:

• You probably want to use display: flex not inline-flex.
• Add flex-wrap: wrap to allow wrapping onto multiple lines.
• Remove width: 33% if you wish it to take entire space avaiable.

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

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li {  list-style: none;  flex: 0 0 33.333333%;}

<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>

Is there a way to have different justify-content values for different rows inside a flexbox-container?

The answer is no.

In grid, there is the justify-self property in which this would be true. However, in flex there is no support for this style as of May 2022.

flex does support align-self for aligning flex item's on the y-axis (align-items), but not for the x-axis (justify-content).

The good news.

You can still replicate these styles in your stylesheet but they will have to be done manually. You can target the first and second flex-item and use width: calc(100%/2) for the first two flex items that you want to each take 50%. Then you can add flex-wrap: wrap on to your flex-container so the image flex-items wrap onto a new row. Then you can replicate justify-content: space-between; by adding margin: auto; to those respective flex-items.

See below:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item:first-child,
.flex-item:nth-child(2) {
  width: calc(100%/2);
  outline: dotted 1px black;
}

.flex-item:nth-child(3),
.flex-item:nth-child(4),
.flex-item:nth-child(5) {
  outline: solid 1px;
  background: orange;
  padding: 10px;
}

<div class="wrapper flex-container">
  <div class="flex-item">
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <div class="flex-item">
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <figure class="flex-item" style="margin-right: auto;"><img src="https://dummyimage.com/100/000/fff" alt="junckers"></figure>
  <figure class="flex-item" style="margin: auto;"><img src="https://dummyimage.com/100/000/fff" alt="byg-garanti"></figure>
  <figure class="flex-item" style="margin-left: auto;"><img src="https://dummyimage.com/100/000/fff" alt="gulvbranchen"></figure>
</div>

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

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>

---

Related Topics