Можно ли выровнять элементы по центру при сползании вниз блока?

Question

[Programmir]

Допустим, есть два блока. У родителя стоит flex-wrap:wrap и justify-content:space-between. И на том разрешении, когда блок сползает вниз, нужно сделать justify-content:center. Как-то это можно реализовать?

Answer 1

[Иван В]

Последний блок можно выровнять с помощью margin: auto;

Пример:

<style>
  .container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .col {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    min-height: 250px;
    flex: 0 0 30%;
    max-width: 30%;
    border: 1px solid black;
    margin-bottom: 25px;
  }

  .col:last-of-type {
    margin-left: auto;
    margin-right: auto;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col">
      1
    </div>
    <div class="col">
      2
    </div>
    <div class="col">
      3
    </div>
    <div class="col">
      4
    </div>
  </div>
</div>

Но это будет работать если из ряда выпал только один блок.