將一個元素移到帶有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>