使用flexbox将一个元素移动到列表的末尾

Question

如何使用CSS将"3"移动到列表末尾？

看到 jsbin here

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  align-self: flex-end; /* this doesn't work; how can I move 3 to the end? */
}

 <ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

Answer 1

使用该order属性.在这种情况下,order: 1可以正常工作,因为其他元素的顺序设置为0默认值.

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  order: 1;
}

<ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

Answer 2

您可以设置order-order:1在end元素上添加以将其放置在列表的末尾 - 因为我们没有为其他flex 子项指定它，它们将采用默认值零。

请参阅下面的演示：

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  align-self: flex-end;
  order:1;
}

<ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>