Centering multiple elements with flexbox - flex-flow: row wrap puts every child in separate row

Question

I have the following layout:

.app-container {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-around;
  min-height: 100vh;
  background-color: #4caf50;
  font-family: "Roboto", "Noto", sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 84px;
}

.card {
  background-color: #fff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.12);
  margin: 8px;
  border-radius: 2px;
  min-width: 304px;
  max-width: 466px;
  font-family: 'Roboto', 'Noto', sans-serif;
  flex-grow: 1;
}

.card .text {
  padding: 16px 16px 25px 16px;
  font-size: 14px;
}

<div class="app-container">
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
      </div>
    </div>
</div>

Now what I want to happen is for the .card divs to float naturally to be on the same line where there is space, but remain centered vertically and horizontaly (so the height of the cards remains the same instead of the cards expanding to fill the whole row regardless of the contet).

What happens is that if I do not set display:inline-block; my .card divs just stay one per row. But if I change the display, the centering stops working.

How do I fix this?

Put display flex on the 'cards' container (content-container) — pol, Jan 22 '17 at 11:39
Got rid of the content-container to not make this more confusing, still encountering the same problem. — Miha Šušteršič, Jan 22 '17 at 11:54

Serg Chernata · Accepted Answer · 2017-01-22T13:19:31.023

1

I believe this is what you're looking for.

.app-container {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  background-color: #4caf50;
  font-family: "Roboto", "Noto", sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 84px;
}

.card {
  background-color: #fff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.12);
  margin: 14px;
  border-radius: 2px;
  min-width: 120px;
  max-width: 120px;
  font-family: 'Roboto', 'Noto', sans-serif;
  flex-grow: 1;
}

.card .text {
  padding: 16px 16px 25px 16px;
  font-size: 14px;
}

<div class="app-container">
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
      </div>
    </div>
    <div class="card">
      <div class="text">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
      </div>
    </div>
</div>

edited Jan 22 '17 at 13:19

answered Jan 22 '17 at 13:06

Serg Chernata

12,280
6
32
50

How is this different from the code I posted? As far as I can tell the CSS rules are the same. It also does not solve the problem of every element in the same row being the same height... – Miha Šušteršič Jan 22 '17 at 13:11
You don't want them to be the same height? – Serg Chernata Jan 22 '17 at 13:12
yes, I guess the question could be worded better, I'll edit it out – Miha Šušteršič Jan 22 '17 at 13:13
Hell yeah it could be better, this is in your question dude: "so the height of the cards remains the same" – Serg Chernata Jan 22 '17 at 13:13
Updated. Better, worse? – Serg Chernata Jan 22 '17 at 13:19
This is exactly what I was looking for. So what is the difference between align-items and align-content? Or rather why did it help in my case – Miha Šušteršič Jan 22 '17 at 13:22
I believe align content is relative to container, align-items is relative to items. – Serg Chernata Jan 22 '17 at 13:23
`align-items` is for positioning a single line of flex items. `align-content` is used when there are multiple lines. http://stackoverflow.com/a/40890703/3597276 – Michael Benjamin Jan 22 '17 at 15:48

Centering multiple elements with flexbox - flex-flow: row wrap puts every child in separate row

1 Answers1