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

html5 • • 问答

尝试在 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>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>

回答

这是您需要的：

.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>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

而不是使用：

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

您还可以使用：

flex-flow: column wrap-reverse;

以上是CSSFlexbox，从右到左的内容，右对齐，底部对齐的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容