CSS Flexbox，从右到左的内容，右对齐，底部对齐

Question

尝试在 CSS 中布局以下图块，但似乎无法找到正确的对齐/对齐组合。

这是我到目前为止所得到的:

    .container {
        border: 3px solid red;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-end;        
        width: 100%;
        height: 500px;
    }
    .item {
        border: 3px solid red;
        width: 150px;
        height: 150px;
    }

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>

结果不是从右到左，也不是“推”到右侧。

Answer 1

这是您需要的:

.container {
  border: 3px solid red;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  width: 100%;
  height: 500px;
}

.item {
  border: 3px solid red;
  width: 150px;
  height: 150px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

而不是使用:

flex-direction: column;
flex-wrap: wrap-reverse;

您还可以使用:

flex-flow: column wrap-reverse;