39

I'm trying to center a group of wrapped flex items. The HTML looks like this:

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}
<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

DEMO

The above looks like this:

enter image description here

The green boxes are wrapped correctly, but they, as a whole, are not centered in the red area,

enter image description here

without defining a width on the .container because the red block can have any size and I want to fit as many blocks next to each other as possible.

Any suggestions how to center the wrapped green blocks?

UPDATE: According to this 2 year old post it is not possible. So in my case I have to use javascript to fix this. But maybe I can use CSS Grid Layout

Community
  • 1
  • 1
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
  • Yes your update is right, there is no solution with flexbox. But in your duplicate post there is an answer that shows how you can achive it with grid https://stackoverflow.com/a/60870221/2311074 Note that this only works when your items have a fixed width. That seems to be the case in your case. – Adam Aug 07 '22 at 14:53

2 Answers2

31

Not sure what kind of centering you want do

So a few options:

Option 1: just center the elements in .container

  • add justify-content: center; to .container instead

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}
<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Option 2: center the .container

  • add some width + margin:auto to .container

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 300px;
  margin: auto;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
  box-sizing: border-box
}
<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Option 3: center both from above options

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  justify-content: center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}
<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>
Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
  • 3
    Thnx for the help! Your first option does indeed what I need, except that the 4th block is centered instead of left-aligned. – Jeanluca Scaljeri Apr 04 '17 at 13:50
  • you must decide something, you say you want `.container`to have any `width` but then it won't be more than `390px` because you set it in `main`, so using `max-width` with `%` and `margin` as mentioned in my option #2 and #3 it will work. – dippas Apr 04 '17 at 14:08
  • `.container` should not be bigger than its parent. `main` is here `390px` but it could as well be the width of the browser – Jeanluca Scaljeri Apr 04 '17 at 14:15
  • So exactly, using `width` in `%` in `.container` will work – dippas Apr 04 '17 at 14:17
  • I must say its getting close. Checkout this [jsfiddle](https://jsfiddle.net/j5qom5f7/). The width of the container is incorrect. – Jeanluca Scaljeri Apr 04 '17 at 14:25
1

If you just want to center the container give a fixed width to the container or make sure that the width of the container has the expected width.

    main {
        background-color: blue;
        width: 390px;
        display: flex;
        justify-content: center;
    }
    
    .container {
        background-color: red;
        display: inline-flex;
        flex-wrap: wrap;
        width:306px;
    }
    
    .a1 {
      color: grey;
      width: 100px;
      height: 200px;
      background-color: green;
      border: 1px solid black;
    }
<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>
Blackbam
  • 17,496
  • 26
  • 97
  • 150