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

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

Flexbox は、コンテナ内で要素を配置するための強力なソリューションを提供します。その多用途機能の 1 つは、要素をコンテナの下部に配置することです。彼らのコンテナ。実際のシナリオでこの配置を実現する方法を見てみましょう。

提供された HTML 構造を考慮して、段落内に存在するテキストの量に関係なく、フレックスボックスを使用して ".button" 要素を一番下に配置することを目指します。 .

自動マージンの使用

フレックスボックスを使用して要素を下に揃える鍵は、操作にあります。余白。具体的には、「自動マージン」の概念を活用して、望ましい動作を実現できます。自動マージンは、使用可能なスペースを「自動」マージン値を持つ要素に自動的に分配します。

したがって、次の CSS プロパティのいずれか (または両方) を適用すると、「.button」要素が一番下にプッシュされます:

実装例

この例では、フレックスボックスが有効で列方向の親コンテナを作成します。段落とボタンに「自動」マージンを適用します。その結果、段落内のさまざまなテキストの内容に関係なく、ボタンは一番下に押されます。

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