Przeniesienie jednego elementu na koniec listy przy pomocy flexbox

Question

Jak przenieść "3" na koniec listy przy użyciu CSS?

Zobacz 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

użyć właściwości order. W tym przypadku, order: 1 działa, ponieważ inne elementy mają ich kolejność ustawiony 0 domyślnie.

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

Można ustawić order - dodaj order:1 na elemencie end, aby umieścić go na końcu listy - jak nie podać go do innych Flex dzieci będą one przyjąć domyślną wartość zero.

zobacz demo poniżej:

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>