Flex Justify content

Question

I have div like this: The green is padding of the main div. You can see first and second row, that I have space on the right side. I want to be Justify, but the third row I want to keep it is possible. So I want to fill that extra space, but I don't want to stretch the third row.

In that main div I have this div: This div keep all cards inside.

.favoritesWrapper {}

.card {
  height: 130px;
  background-color: white;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.icon {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  padding-left: 35px;
  padding-right: 35px;
  margin-top: 5px;
  text-align: center;
  font-size: initial
}

<html>
<div class="favoritesWrapper">
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>

</html>

I also try to put on favoritesWrapper display Flex, and align-items: Justify But no results. Any help is welcome. Browser: Google Chrome

FelipeAls · Accepted Answer · 2018-11-07T15:10:57.700

You can force flex items on the last row to be left aligned by adding a hidden flex item spanning the whole available space. A common trick is to use a :pseudo of the flex container for that (flex container pseudo-elements are flex items as children can be)

.favoritesWrapper {
  display: flex;
  flex-wrap: wrap;
}

/* this :pseudo is an hidden flex item which occupies available space on last row.
   Result: last row isn't justified */
.favoritesWrapper::after {
  content: '';
  flex: 1 1 auto;
  /* @DEBUG visualize the trick */
  border: 1px solid deeppink;
  background: pink;
}

.card {
  flex: 1 0 auto; /* flex-basis must be auto and not 0 so 2nd row of text in cards can display on a single line */
  height: 130px;
  background-color: white;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.icon {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  padding-left: 35px;
  padding-right: 35px;
  margin-top: 5px;
  text-align: center;
  font-size: initial
}

<div class="favoritesWrapper">
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
</div>

This is great and work! One more question: As you see on my image all cards have text in one line and this design I want to keep. When I paste your CSS, justify content is on, but all cards put text in two lines. How we can handle that. Thank you one more time! — Nemanja Andric, Nov 07 '18 at 10:34
Ah yes, good observation! I wrote `.card { flex: 1;}` which means (after [reading the spec](https://www.w3.org/TR/css-flexbox/#flexibility)) `flex: 1 0 0` and that's wrong in your case: you want `flex: 1 0 auto;` (`flex: 1 1 auto;` also works depending how shrinkable you want your cards and the latter is equivalent to `flex: auto;`, phew). I shouldn't shorten it till I know them by heart :D — FelipeAls, Nov 07 '18 at 15:09
So perfect! That is exactly I need. Thank you very very much! — Nemanja Andric, Nov 07 '18 at 15:14

Flex Justify content

1 Answers1