将一个元素移到带有flexbox的列表的末尾

Question

如何将“3”移动到使用CSS的列表末尾？

见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 - 在end元素添加到order:1其放置在列表的末尾 - 因为我们没有指定它为其他柔性孩子他们会采用零的默认值。下面

观看演示：

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>