Как создать чистый макет с выравниванием по левому краю с четырьмя столбцами, используя justify-content: space -ween

Question

Я пытаюсь создать компонент отображения пост-блога с Flexbox, который в основном использует justify-content: space-between. В макете с 4 столбцами это выглядит великолепно, когда есть 4 сообщения, чтобы заполнить строку. Проблема в том, что не 4 сообщения, а 2 или 3. На этом этапе сообщения распределяются, и это выглядит просто неаккуратно. Я хочу использовать flexbox без JavaScript и хочу, чтобы макет был полностью адаптивным. Таким образом, в других точках останова макет столбца упадет до 3, 2 или даже 1.

Одна из замечательных вещей, которые я нашел, это добавление псевдоэлемента :after в оболочку с заданной шириной, которая заполнит пустое пространство. Проблема в том, что он недостаточно динамичен и не будет работать должным образом, если у меня будет другое количество сообщений, чем то, которое я планировал.

Например: если у меня 2 поста, каждый с шириной 25%, а затем псевдоэлемент с шириной 50%, все выглядит великолепно. Когда у меня есть 3 сообщения, это не так здорово, потому что 50% псевдоэлемента теперь должно быть 25%. Наконец, если есть 4, мне не нужен псевдоэлемент вообще.

Я пытаюсь использовать некоторые селекторы SASS, но по какой-то причине, когда я пытаюсь нацелить родительский элемент с помощью моего элемента :after, он нацелен на что-то еще вверх по дереву DOM.

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

    .entry:nth-child( 2 ):last-of-type {
        :after & {
            content: "";
            flex-grow: 0;
            width: 50%;
        }
    }
    .entry:nth-child( 3 ):last-of-type {
        :after & {
            content: "";
            flex-grow: 0;
            width: 50%;
        }
    }
}

В этот момент я ожидал, что элемент: after будет нацелен на родительский класс «content», но это не так. Я также не думал о том, как настроить его так, чтобы он был более динамичным и мог обрабатывать несколько строк. Я думаю, я мог бы просто сделать математику и сделать что-то вроде .entry:nth-child( 3n+4 ):last-of-type {}, но я еще даже не получил там.

Answer 1

Вот сеточное решение в Code Pen

Для того, чтобы это работало в шаблоне запроса, оно должно выглядеть так:

<div class="post-grid>
    //while loop here
    <div class="each-post">
        <img src="<?php get_the_post_thumbnail() ?>">
        <h2><?php get_the_title() ?></h2>
        <p><?php get_the_excerpt() ?></p>
    </div>
    // end loop here
</div>

Answer 2

CSS-Grid может показаться лучше, чем flexbox.

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  margin-bottom: 1em;
}

.red .entry {
  background: red;
}

.blue .entry {
  background: blue;
}

.green .entry {
  background: green;
}

.entry {
  height: 50px;
}

<div class="content red">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="content blue">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="content green">
  <div class="entry"></div>
  <div class="entry"></div>
</div>