position at start, elements inside a justified div - css

Question

I have a problem in css that I can't solve. I have a 'container' div, which has several sections as children.

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-height: 1000px;
  background-color: wheat;
  justify-content: center;
  justify-self: flex-start;
}

.container .box {
  width: 25%;
  justify-self: flex-start;
  height: 200px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}

<div class="container">
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
</div>

I need the last sections to start showing as the previous sections are shown. I have tried with justify-self: flex-start in each section, but nothing, how can the last two sections be displayed in the same way that the previous ones are positioned? . Thank you

Use `justify-content: flex-start` on the `container` – UkFLSUI Feb 02 '22 at 05:31 — UkFLSUI, Feb 02 '22 at 05:31

score 1 · Accepted Answer · answered Feb 02 '22 at 06:30

.container {
  display: grid;
  padding: 0 15px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  max-height: 1000px;
  background-color: wheat;
}

.container .box {
  height: 200px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}

<div class="container">
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
    <section class="box"></section>
</div>

score 0 · Answer 2 · answered Feb 02 '22 at 05:24

0

What you need is justify-content: flex-start. If you want to center you container div, you'll have to do it differently. You can center it in a parent div for instance, but you can't use justify-content: center and exempt the last row.

answered Feb 02 '22 at 05:24

Will

1,123
1
9
22

position at start, elements inside a justified div - css

2 Answers2