要素をフレックスボックス コンテナの下部に揃えるにはどうすればよいですか?

フレックスボックスを使用して要素を下に揃える

div コンテナーに見出し、段落、とボタンの場合、段落内のテキストの量に関係なく、ボタンをコンテナの下部に揃えることが望ましい場合があります。この配置は、Flexbox を使用して効果的に実現できます。

自動マージンを使用してこの下部配置を実現するには、次の CSS を適用できます。

p { margin-bottom: auto; }

このディレクティブは、後続のすべての要素を下部にプッシュします。コンテナ。あるいは、次のコマンドを使用してボタン自体をターゲットにすることもできます。

a { margin-top: auto; }

これにより、ボタンと後続の要素が一番下にプッシュされます。

div コンテナ内で、Flexbox プロパティは次のように設定されます。

.content {
  display: flex;
  flex-direction: column;
}

これらの設定は、コンテナ内の子要素の列レイアウトを確立します。見出しには、連続する要素間のスペースを防ぐためのマージン値がありません。ボタンの自動マージンにより、ボタンが常に下部の位置を占めるようになります。

これらのスタイル調整を実装することで、さまざまなテキストの内容に関係なく、ボタンがコンテナの下部に固定された希望のレイアウトを実現できます。段落内。

以上が要素をフレックスボックス コンテナの下部に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。