Center a group of wrapped flex items [duplicate]

by

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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)