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

参见英文答案 > Control order of vertically stacked elements using only CSS Flexbox1个
如何使用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>

解决方法

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>

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!