html - 从右下角开始的方 block 网格

Question

我正在寻找一种很好的 CSS 方法来使无序列表始终在右下角结束。例如:

      ||  1  ||   2 
  3   ||  4  ||   5

在普通的 block 网格中，我使用的是 float 列表项。我一直在寻找 flexbox 的解决方案，但没有找到任何令人满意的东西。

将一个元素添加到此列表将生成如下列表:

  1   ||  2  ||   3 
  4   ||  5  ||   6

另一种是

      ||     ||   1
  2   ||  3  ||   4 
  5   ||  6  ||   7

Answer 1

您可以将 flexbox 与 flex-wrap: wrap-reverse 和 flex-direction: row-reverse 一起使用。您可以根据需要添加任意数量的附加子元素。 (注意:我将容器高度保留为默认值)

  * {
  box-sizing: border-box;
  }
  .x {
    width: 302px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    border: 1px solid red;
    flex-grow: 0;
    flex-basis: 0%;
  }
  .y {
    width: 100px;
    height: 100px;
    border: 1px solid green;
  }

<div class="x">
  <div class="y">1</div>
  <div class="y">2</div>
  <div class="y">3</div>
  <div class="y">4</div>
  <div class="y">5</div>
</div>