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

Flexbox を使用して要素を下部に配置

要素をコンテナの下部に配置するには、Flexbox を使用します。このシナリオでは、さまざまな子要素を含む div があり、.button 要素を下部に固定しておきたい場合、Flexbox が解決策を提供します。

Flexbox は、配置を実行する前に空きスペースを「自動マージン」に分配します。 justify-content と align-self。これは、自動マージンを使用して、フローから削除せずに .button 要素を一番下にプッシュできることを意味します。

その方法は次のとおりです:

Using Margin-Bottom: Auto

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

このルールは、.button 要素を含む次の要素をプッシュします。

Margin-Top の使用: Auto

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

または、このルールは .button 要素と後続の要素を一番下にプッシュします。

効果を実証するには、次の HTML とCSS:

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  margin: 0;
}

a {
  margin-top: auto;
}

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

これにより、固定高さのコンテナが作成されます。段落内のテキストの量に関係なく、.button 要素は下部に残ります。

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