Можете ли вы использовать обратный перенос flexbox, чтобы перевернуть серию делений в сетке, но при этом иметь полный верхний ряд?

Question

Вот простой пример моей проблемы.

https://codepen.io/yonatanmk/pen/NMRmLq

У меня есть серия div, которые я хотел бы отобразить в сетке из 4 столбцов, но в обратном порядке, начиная с кота Санта-Клауса в левом верхнем углу. Это похоже на работу для flex-wrap: wrap-reverse;, но использование flexbox приводит к неполный верхний ряд. Я бы предпочел иметь неполный нижний ряд, как если бы вы не изменили порядок деления.

Должен ли я попробовать что-то кроме flexbox?

Спасибо

Вот мой код:

HTML

<div class="container">
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </div>
  <div class="item">
    <img src="http://www.wallpapermania.eu/images/lthumbs/2012-04/412_kitty-cat.jpg" />
  </div>
</div>

CSS

body {
  background-color: #2d2d2d;
}

.container {
  width: 1024px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: #ffffff;
  padding: 1em;
  margin: 1em auto;

  .item {
    height: 10em;
    width: 24%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    img {
      width: 100%;
    }
  }
}

Answer 1

flex-wrap: wrap-reverse только оборачивает содержимое вдоль поперечной оси в обратном направлении.

Вы также можете добавить: flex-direction: row-reverse, чтобы расположить содержимое вдоль главной оси в обратном порядке.

Это все еще оставляет проблему, когда количество предметов не кратно четырем. Чтобы исправить это, мы могли бы добавить поле к последнему элементу в зависимости от количества элементов, используя селекторы nth-last-child и first-child css.

  :nth-last-child(4n+3):first-child {
    margin-right: 25%;
  }

  :nth-last-child(4n+2):first-child {
    margin-right: 50%;
  }

  :nth-last-child(4n+1):first-child {
    margin-right: 75%;
  }

Полный CSS:

body {
  background-color: #2d2d2d;
}

.container {
  width: 1024px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: #ffffff;
  padding: 1em;
  margin: 1em auto;

  :nth-last-child(4n+3):first-child {
    margin-right: 25%;
  }

  :nth-last-child(4n+2):first-child {
    margin-right: 50%;
  }

  :nth-last-child(4n+1):first-child {
    margin-right: 75%;
  }

  .item {
    height: 10em;
    width: 25%;
    padding: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    img {
      width: 100%;
    }
  }
}

Обновлен Codepen здесь: https://codepen.io/roboreilly/pen/ZoBZge

Answer 2

Поскольку вы используете sass, возможно, вы можете сделать что-то вроде этого, если вы можете предвидеть максимальное количество элементов списка, которое у вас будет (10 в данном случае):

@for $i from 0 through 10 {
  .container .item:nth-child(#{$i}) {
    order: -$i;
  }
}

Я изменил ваш код здесь