Question 192321 in CSS Question posted in
Some basic documentation can be found here.

Css – How to use Flex-wrap to wrap the 6th box to next line

My goal is I want my boxes in the first line are 5 rows and the 6th box will go to the next row? Can you show me how to do it?

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
}

.box {
  flex: 1;
  height: 50px;
  background: yellow;
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>
Tags:

3

Answers


  1. 0

    Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (grow or shrink) to fill the available space.

    Grid is a two-dimensional layout system that lets you lay content out in rows and columns. I believe Grid is the better choice for your intentions.

    .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
}

.box {
  background: yellow;
}
    <div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>
    Login or Signup to reply.
  2. 0

    Your title and description are contradictive, I’m assuming you want 5 columns, and when 5 columns are placed, the new items wrap onto the next wrap.

    Set the flex-basis equivalent to the value to 100 / what column the wrap should happen at (100 / 6) = 16.66%):

    .container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
}

.box {
  flex: 1 0 16.66%;
  height: 50px;
  background: yellow;
}
    <div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>
    Login or Signup to reply.
  3. 0

    Here is an example to fix the issue you are having.

    .container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.box {
    width: calc(20% - 30px); //minus the gap
    background: #ffd6d6
}
.box:nth-of-type(even) {
    background: #fafafa;
}
    <div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
</div>

    You could also give the .container class a max-width and margin: 0 auto to make this responsive. Or use Bootstrap which uses flex box containers with build is resposive features and a ton more.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search