フレックスボックスコンテナにアイテムを水平および垂直に整列するにはどうすればよいですか？

フレックスボックスコンテナにアイテムを水平および垂直に整列するにはどうすればよいですか？

水平方向と垂直の両方でフレックスボックスコンテナにアイテムを整列するには、サイズが不明である場合でも動的であっても、コンテナ内のアイテム間でより効率的な方法を提供する方法を提供するように設計されたFlexboxレイアウトモデルを理解する必要があります。

水平アライメント：
FlexBoxの水平アライメントは、コンテナに適用されるjustify-contentプロパティによって管理されます。このプロパティはいくつかの値をとることができます：

• flex-start ：アイテムは、メイン軸の開始に向かって詰め込まれています。
• flex-end ：アイテムはメイン軸の端に向かって詰め込まれています。
• center ：アイテムは主軸に沿って中央にあります。
• space-between ：アイテムはラインに均等に分散されています。最初の項目はスタートラインにあり、最後の項目はエンドラインにあります。
• space-around ：アイテムは、周囲の等しいスペースで均等に配布されています。
• space-evenly ：アイテムは、最初のアライメントサブジェクトの前、最後のアライメントサブジェクトの後に、隣接する2つのアライメントサブジェクト間の間隔が同じになるように配布されます。

垂直アライメント：
垂直アライメントは、コンテナに適用されるalign-itemsプロパティによって制御されます。この特性は、軸が横軸に影響します（主軸が水平である場合、垂直）。考えられる値は次のとおりです。

• stretch （デフォルト）：容器の交差軸を満たすためにアイテムが伸びています。
• flex-start ：アイテムは、交差軸の開始時に配置されます。
• flex-end ：アイテムは、交差軸の端に配置されます。
• center ：アイテムは交差軸の中心です。
• baseline ：アイテムは、ベースラインが揃うように整合しています。

たとえば、フレックスボックスコンテナの水平方向と垂直の両方のアイテムを中心にするには、次のCSSを使用できます。

 <code class="css">.container { display: flex; justify-content: center; /* horizontal alignment */ align-items: center; /* vertical alignment */ }</code>

FlexBoxの「Justify-Content」と「Align-Items」の違いは何ですか？

FlexBoxのjustify-contentおよびalign-itemsプロパティは、アライメントに使用されますが、アライメントの異なる軸を制御します。

• Justify-Content ：このプロパティは、フレックスボックスコンテナの主軸に沿ってフレックスアイテムを整列するために使用されます。メイン軸はデフォルトでは水平です（左から右）が、 flex-directionプロパティがcolumnに設定されている場合、垂直に変更できます。フレックスアイテムの間と周辺のスペースの分布に影響します。
• Align-Items ：このプロパティは、コンテナの交差軸に沿ってフレックスアイテムを並べます。交差軸は主軸に垂直であるため、デフォルトでは垂直（上から下）になりますが、 flex-directionがcolumnに設定されている場合は水平になります。それは、交差軸内の高さの点でアイテムがどのように整合するかに影響します。

要約すると、 justify-contentメイン軸上のアイテムの分布と調整を扱いますが、 align-items交差軸に沿ったアライメントを扱います。

FlexBoxコンテナ内に、水平方向と垂直の両方で単一のアイテムをどのように中央に配置できますか？

FlexBoxコンテナ内で水平および垂直の両方のアイテムを中央に配置するには、コンテナで次のCSSプロパティを使用できます。

 <code class="css">.container { display: flex; justify-content: center; /* Centers the item horizontally */ align-items: center; /* Centers the item vertically */ height: 100vh; /* Optional: Sets a height for the container */ }</code>

各プロパティが行うことの内訳は次のとおりです。

• display: flex; FlexBoxレイアウトを使用するようにコンテナを設定します。
• justify-content: center;主軸の中心にあるフレックスアイテムを整列させます（主軸が水平である場合、水平方向に）。
• align-items: center;交差軸の中心にあるフレックスアイテムを整列させます（垂直に、交差軸が垂直である場合）。

height: 100vh;オプションであり、コンテナをビューポートの完全な高さに設定するために使用され、画面全体にセンタリング効果が表示されるようにします。

コンテナの端でアイテムを整列するために使用する必要があるFlexBoxプロパティはどれですか？

フレックスボックスコンテナの端にあるアイテムを整列するには、主軸と交差軸の両方を考慮する必要があります。

主軸（水平アライメント）：

• justify-content: flex-end;メイン軸の端にアイテムを揃えます。主軸が水平（デフォルト）の場合、これはアイテムをコンテナの右側に並べます。

交差軸（垂直アライメント）：

• align-items: flex-end;交差軸の端にアイテムを揃えます。交差軸が垂直（デフォルト）の場合、これによりアイテムがコンテナの下部に並べられます。

以下は、フレックスボックスコンテナの右下にアイテムを並べる方法の例です。

 <code class="css">.container { display: flex; justify-content: flex-end; /* Aligns items to the right */ align-items: flex-end; /* Aligns items to the bottom */ }</code>

justify-content: flex-end;およびalign-items: flex-end; 、メイン軸と交差軸の両方の端にフレックスアイテムを配置することで、コンテナの右下隅にアライメントが表示されます。

以上がフレックスボックスコンテナにアイテムを水平および垂直に整列するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。