最後のフレックスアイテムをコンテナの最後に配置します

Question

この質問はフレックスボックスを含むフルcss3対応のブラウザに関するものです。

私はいくつかの項目を持つフレックスコンテナを持っています。彼らはすべてフレックススタートに正当化されますが、私は最後の.endアイテムをフレックスエンドに正当化します。 HTMLを変更することなく、絶対的な位置付けに頼ることなくこれを行う良い方法はありますか？

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    outline: 1px solid green; 
 
    min-height: 400px; 
 
    width: 100px; 
 
    justify-content: flex-start; 
 
} 
 
p { 
 
    height: 50px; 
 
    background-color: blue; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p class="end"></p> 
 
</div>

Answer 1

Flexible Box Layout Module - 8.1. Aligning with auto margins

フレックス項目の自動マージンがブロックフローの自動マージンと非常に類似の効果を持っている：

• フレックス拠点の計算中と柔軟な長さ、自動マージンは0として扱われます。

• justify-contentとalign-selfでアライメントする前に、正の空きスペースがそのディメンションの自動余白に割り当てられます。

したがって、あなたは他の要素と最後の要素の間にスペースを分配するmargin-top: autoを使用することができます。これにより、要素が下部に配置されます。

.end { 
    margin-top: auto; 
} 

また、クラスを使用して回避し:last-of-type/last-child疑似クラスを利用することができます。

p:last-of-type { 
    margin-top: auto; 
} 

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    outline: 1px solid green; 
 
    min-height: 400px; 
 
    width: 100px; 
 
    justify-content: flex-start; 
 
} 
 
p { 
 
    height: 50px; 
 
    background-color: blue; 
 
    margin: 5px; 
 
} 
 
.end { 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p class="end"></p> 
 
</div>

Answer 2

このフレキシボックスプリンシパルは0
として扱われ フレックス塩基およびフレキシブル長さの計算、自動マージンの間に水平

も動作整列人の前にt via justify-content、 align-selfのいずれかの正の空き領域が、その次元の の自動余白に配布されます。

最終アイテムの自動左余白を設定すると作業が行われます。

.last-item { 
    margin-left: auto; 
} 

コード例：

.container { 
 
    display: flex; 
 
    width: 400px; 
 
    outline: 1px solid black; 
 
} 
 

 
p { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 5px; 
 
    background-color: blue; 
 
} 
 

 
.last-item { 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p class="last-item"></p> 
 
</div>

enter link description here

これはデスクトップフッターに非常に便利です。

Envatoとして、会社のロゴがここにいました。

Codepen Snippet