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

This question already has an answer here:

Control order of vertically stacked elements using only CSS Flexbox

(1个答案)


4年前关闭。




如何使用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>

最佳答案

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