Flexbox を使用して要素をコンテナの底に揃えるにはどうすればよいですか?

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

提供されたシナリオでは、さまざまな子要素を持つ div コンテナーがあります。テキストの高さに関係なく、ボタンが常に下部に配置され、要素が垂直に積み重ねられるレイアウトを実現することを目指しています。

Flexbox は、自動マージンを通じてこの問題の解決策を提供します。自動マージンを使用すると、配置前に自動マージンを使用して要素に残りのスペースを分配できます。目的のレイアウトを実現する 1 つの方法は、次の CSS を使用することです:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

または、次のようなフレックス レイアウトを使用することもできます:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1 id="heading">heading 1</h1>
  <h2 id="heading">heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

このアプローチにより、次のことが保証されます。テキスト要素は利用可能な高さいっぱいに拡大され、ボタンはコンテナの下部に押し込まれます。

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