フレックスボックスを使用して1つの要素をリストの最後に移動

Question

CSSを使用してリストの最後に "3"を移動するにはどうすればよいですか？

はorderプロパティを使用し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

を参照してください。この場合、他の要素の順序はデフォルトで0に設定されているため、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 { 
 
    order: 1; 
 
}

<ul> 
 
    <li class="end">3</li> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul>

Answer 2

あなたはorderを設定することができます - リストの最後にそれを置くためにend要素に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 { 
 
    align-self: flex-end; 
 
    order:1; 
 
}

<ul> 
 
    <li class="end">3</li> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul>

を