Question 178935 in Html Question posted in
Some basic documentation can be found here.

Html – Center horizontally a list of flex children with justify start

I would like to have a list of squares with justify-start aligned to left but they whole should be centered in the parent div.

So instead of this:

enter image description here

I would like this:

enter image description here

I don’t want this:
enter image description here

I would like to have a list of elements that should be wrapped by the containers, the space between items should be fixed (no justify between), all the items should be centered respect to the parent div.

Is that possible with flex?

Here my code:

.container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: start; 
  border: 5px solid gold;
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}
<div class="container">
  <div class="container-squares">
    <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>
</div>

Is that possibile maybe using grid? But how? I tried but it doesn’t. work as I’m expecting…

.container-grid {
  width: 80%;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border: 5px solid gold;
}
.item-grid {
  width: 150px;
  height: 150px;
  background-color: teal;
  border: 1px solid black;
}
<div class="container-grid">
  <div class="container-squares-grid">
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
    <div class="item-grid"></div>
  </div>
</div>

Thank you!

Tags:

3

Answers


  1. 0

    with flex: you can just change justify content from start to center in container-squares

    ie: .container-squares { justify-content: center; }

    .container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; 
  border: 5px solid gold;
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}
    <div class="container">
  <div class="container-squares">
    <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>
</div>
    Login or Signup to reply.
  2. 0

    I think you can’t. The grid and flex parents should contain a width property. if you don’t specify the width, your flex container fill 100% of the parent’s width

    in grid you can use repeat(auto-fit, 150px) in your parent container and aspect-ratio: 1; in your child but still you have same problem

    Even if you set the width, your parent will always have empty space on its right side

    check this code :

    .container {
        width: 100%;
        display: flex;
        justify-content: center;
        border: 5px solid black;
      }
      .container-squares {
        display: grid;
        grid-template-columns: repeat(auto-fill, 10rem);
        grid-gap: 1rem;
        width: 80%;
      }
      .item {
        aspect-ratio: 1;
        background-color: #f4cbcc;
        border: 1px solid black;
      }
    <div class="container">
      <div class="container-squares">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
      </div>
    </div>
    Login or Signup to reply.
  3. 0

    This happens because you did not specify the width of container-squares and hence, by default it takes the full width of the parent, which is container. Include width in container-squares class and you can see that the group of squares will get centered. Maybe give the container some 80% of the width.

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

Back To Top
Search