Question

我正在寻找一种不错的CSS方式，让无序列表总是在右下角结束。例如：

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

在普通的块网格中，我使用浮动列表项。我一直在寻找一个解决方案的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一起使用。您可以根据需要添加任意数量的其他子元素。（注意：我将容器高度保留为默认值）

＆＃13;

  * {
  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;
  }

＆＃13;

<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>

＆＃13;

Answer 2

你可以做浮动＆＃39;在flexbox中使用边距。

如果你想把它漂浮到右边：

margin-left: auto;

这是你一直在寻找的吗？或者我错了： http://codepen.io/powaznypowazny/pen/ZLdBxa

从右下角开始阻止网格

2 个答案: