フレックスアイテムをコンテナの終わりに合わせる

Question

フレックスボックスを使用すると、<p>を親の「終わり」にどのように揃えることができますか？

ドキュメントによると、align-content: flex-endを親要素に追加するだけで十分です。ただし、これは以下の例では機能しません。

例：ここでは

はp要素を含む単純なdiv要素です。

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-content: flex-end; /* This should do the alignment, but doesn't. */ 
 
    background: yellow; 
 
    padding: 50px; 
 
    height: 300px; 
 
    width: 400px; 
 
}

<div> 
 
    <p>Align me to the end.</p> 
 
</div>

jsFiddle

ハックソリューションは、flex: 1で子供に::beforeを追加することですが、よりよい解決策がある場合、私は興味があります。

Answer 1

align-contentプロパティは、コンテナ内にフレックスアイテムの行が複数ある場合にのみ機能します。このプロパティは、行間のスペースを分散するように設計されています。

コンテナには1行しかないので、align-contentは効果がありません。

align-itemsを1行のコンテナに使用します。

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end;  /* changed from align-content */ 
 
    justify-content: flex-end; /* optional */ 
 
    background: yellow; 
 
    padding: 50px; 
 
    width: 400px; 
 
    height: 300px; 
 
}

<div> 
 
    <p> 
 
    Align me in the bottom left corner. 
 
    </p> 
 
</div>

revised fiddle

8.4. Packing Flex Lines: the align-content property

交差軸に余分なスペースがある場合align-contentプロパティが 、 フレックス容器内フレックスコンテナの行を整列させます方法に似てjustify-contentは、 主軸内の個々の項目を整列します。

このプロパティは、単線フレックスコンテナには影響しません。

マルチラインのみフレックスコンテナは、これまでための唯一の行が自動的にスペースを埋めるために広がって シングルラインフレックスコンテナで、中に整列させるためのラインのクロス軸 の空き領域を持っています。