How to wrap last row of flexbox with "space-around"?

Question

I am trying to create a Bootstrap-like grid of cards using CSS flex properties. I have 10 cards (4 each row). However, when using justify-content: space-around (this is what I need), the last row is not aligning with the others (naturally). What is the workaround?

.card-gallery {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
}

.card-box {
  width: 270px;
  height: 400px;
  background: red;
}

<div class="container">
  <div class="card-gallery">
    <div class="card-box"></div>
    <div class="card-box"></div>
    <div class="card-box"></div>
    <div class="card-box"></div>
    <div class="card-box"></div>
    <div class="card-box"></div>
    <div class="card-box"></div>
  </div>
</div>

What do you mean exactly when you say *the last row is not aligning with the others* ? — Rainbow, Dec 25 '19 at 16:57

score 1 · Accepted Answer · 2019-12-25T19:00:02.950

You could try CSS :last-child as in the example below to use different style in your last div.

.flexbox {
  display: flex;
  flex-flow: column;
}

.flex-child {
  background: red;
  align-content: center;
  align-self: center;
}

.flex-child:last-child {
  align-content: space-around;
  align-self: flex-start;
}

<div class="flexbox">
  <div class="flex-child">
    one
  </div>
  <div class="flex-child">
    two
  </div>
  <div class="flex-child">
    three
  </div>
</div>

By the way space-between and applying relative width to your card div works better.

.card-gallery {
  width: calc(100% -2rem);
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1rem;
}

.card-box {
  width: 45%;
  height: 40px;
  background: #ff0;
  align-self: center;
}

div.card-box:last-child {
  align-self: flex-start;
}

<div class="container">
  <div class="card-gallery">
    <div class="card-box">1</div>
    <div class="card-box">2</div>
    <div class="card-box">3</div>
    <div class="card-box">4</div>
    <div class="card-box">5</div>
    <div class="card-box">6</div>
    <div class="card-box">7</div>
  </div>
</div>

symlink · Answer 2 · 2019-12-25T17:56:14.680

0

You can't achieve this easily with flexbox.

Instead, set .card-gallery to display:grid to make sure the cards always line up in a grid formation when multiple rows exist. Then give it this style rule:

grid-template-columns: repeat(auto-fill, 120px)

The auto-fill keyword will make sure the items will wrap when the viewport shrinks:

.container{max-width:479px;background:lightblue}

.card-gallery {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    justify-content: space-around;
}

.card-box {
    height: 100px;
    background: #fff;
    margin-bottom:30px;
    border:solid 2px dodgerblue    
}

<div class="container">
    <div class="card-gallery">
        <div class="card-box">cb</div>
        <div class="card-box">cb</div>
        <div class="card-box">cb</div>
        <div class="card-box">cb</div>
        <div class="card-box">cb</div>
        <div class="card-box">cb</div>
        <div class="card-box">cb</div>
    </div>
</div>

edited Dec 25 '19 at 17:56

answered Dec 25 '19 at 17:00

symlink

11,984
7
29
50

Why `minmax(120px, 120px)` it's as good as `120px` ? Also what you just did can be done with flexbox using `flex-wrap: wrap;` – Rainbow Dec 25 '19 at 17:09
@ZohirSalak You're right that `minmax()` isn't necessary. Flexbox won't allow you to use `space-around` while still lining up the columns when wrapped. – symlink Dec 25 '19 at 17:12
You can use padding on the parent and margin to space the children, Also in grid you can use `grid-gap` instead – Rainbow Dec 25 '19 at 17:16
@ZohirSalak the point of the question was to use `space-around` to evenly space the children – symlink Dec 25 '19 at 17:19
Not necessarily the OP did say `What is the workaround?` since you provided a solution using grid it'll only make sense to use grid properties – Rainbow Dec 25 '19 at 17:22
It does not preserve responsiveness, does it? – awesomemypro Dec 25 '19 at 17:53
@awesomemypro It can, see my edit. I changed the .container `width` to `max-width,` so it is responsive now. `auto-fill` will fill the top column and overflow as needed. – symlink Dec 25 '19 at 17:58

How to wrap last row of flexbox with "space-around"?

2 Answers2