Flexbox コンテナ内の要素を下揃えにするにはどうすればよいですか?

フレックスボックス: 下揃えの要素

子要素を含むコンテナ要素があり、一番下の子要素を揃えたい場合コンテナの底部まで垂直に配置する多用途の Flexbox レイアウト モデルは、効果的なソリューションを提供します。

例では提供:

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

次のレイアウトが必要です:

-------------------
| heading 1          |
| heading 2          | 
| paragraph text     |
| can have many      |
| rows               |
|                   |
|                   |
|                   | 
| link-button        |
-------------------

自動マージンの活用

自動マージンは、次のような場合に便利なツールであることが証明されています。このシナリオ。 justify-content と align-self による位置合わせプロセスの前に、残りの空きスペースはその次元の自動マージンに自動的に配分されます。

したがって、次の CSS ルールの一方または両方を採用できます。

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

実装例

提案された CSS ルールを組み合わせて適用する列方向の Flexbox コンテナを使用すると、望ましい結果が得られます:

.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>

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