フレキシブル レイアウトのルールは何ですか?

フレキシブル レイアウトのルールには、1. コンテナとアイテムの宣言、2. 主軸と交差軸、3. 整列と配置、4. フレキシブル アイテムのプロパティ、5. 行の折り返しと反転、6. . スペースの分布とサイズ設定; 7. 軸間の順序; 8. 軸間の配置; 9. フレックス コンテナーの追加ルール; 10. ネストされたフレックス コンテナーなど。詳細な紹介: 1. コンテナと項目の宣言。フレキシブル レイアウトでは、コンテナは項目を含めるために使用されます。コンテナは任意のブロック レベルの要素にすることができます。2. 主軸と交差軸。フレキシブル レイアウトの項目は主軸に配置されます。 ;3. 整列と分布など

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

フレキシブル レイアウトのルールには、主に次の側面が含まれます:

1. コンテナとプロジェクトの宣言: フレキシブル レイアウトでは、コンテナはプロジェクトを含めるために使用されます。コンテナーには、div などの任意のブロック レベルの要素を指定できます。 CSS では、表示プロパティを flex または inline-flex に設定することにより、要素は flex コンテナとして宣言されます。 item はレイアウトする必要がある要素であり、任意の子要素にすることができます。フレックス レイアウトを使用する要素は、自動的にフレックス アイテムになります。

2. 主軸と交差軸: フレキシブル レイアウトのアイテムは主軸と交差軸に配置されます。主軸の方向は flex-direction プロパティの値に依存しますが、交差軸は主軸に対して垂直です。 flex-direction プロパティを設定すると、主軸の方向を定義でき、それによって項目の配置方向が決まります。

3. 整列と分散: 整列と分散は、フレキシブル レイアウトにおける重要なルールです。 justify-content プロパティは主軸上の項目の配置を制御でき、align-items プロパティは交差軸上の項目の配置を制御できます。これらのプロパティでは、項目を水平方向および垂直方向に中央に配置したり、左または右に移動したりできます。

4. フレキシブル項目のプロパティ: フレキシブル項目のプロパティには、flex-grow、flex-shrink、および flex-basis が含まれます。 flex-grow はスペースが足りない場合のアイテムの拡大率を定義し、flex-shrink はスペースが余っている場合のアイテムの縮小率を定義し、flex-basis はアイテムのデフォルト サイズを定義します。これらのプロパティを使用して、プロジェクトのスケーラビリティとサイズ変更を制御できます。

5. 行の折り返しと反転: flex-wrap 属性を設定することで、項目を折り返すかどうかを制御できます。 flex-wrap:wrap に設定すると、アイテムはコンテナ内でラップされます。さらに、flex-reverse 属性を使用して項目の順序を逆にし、逆レイアウトを実装することができます。

6. 空間分布とサイズ調整: align-content プロパティと justify-content プロパティを設定することで、複数行アイテムの空間分布と配置を制御できます。さらに、flex-basis、flex-grow、および flex-shrink プロパティを使用して項目のサイズを調整し、より柔軟なレイアウト効果を実現することもできます。

7. 交差軸の順序: 柔軟なレイアウトでは、主軸の方向によって決定されることに加えて、交差軸の順序を設定することによって項目の順序を調整することもできます。項目が配置される順序は、交差軸上の項目の開始位置または終了位置を指定する flex-start、flex-end、flex-left、および flex-right プロパティを使用して定義できます。

8. 交差軸の位置合わせ: 交差軸の位置合わせは、align-self 属性を通じて個別に設定できます。これにより、コンテナ内の配置設定をオーバーライドして、項目を交差軸上に配置することができます。 align-self 属性は、auto、flex-start、flex-end、center、baseline、またはストレッチに設定できます。

9. エラスティック コンテナーの追加ルール: エラスティック コンテナーの場合、従う必要のある追加ルールがいくつかあります。たとえば、フレックス コンテナーは、align-items プロパティと justify-content プロパティを使用して項目の配置を制御できます。さらに、フレックス コンテナーには、フレックス セパレーターという追加のサブ項目があります。このセパレータは項目間の間隔を制御するために使用でき、justify-content: space-between; を設定することで、最初の項目をフレックス コンテナの端に揃え、最後の項目をフレックス コンテナの端に揃えるのに使用できます。

10. ネストされたフレキシブル コンテナ: フレキシブル レイアウトでは、フレキシブル コンテナを別のフレキシブル コンテナ内にネストできます。この場合、内側のコンテナは外側のコンテナの配置、主軸の方向、およびラッピングのプロパティを継承します。ただし、内側容器の交差軸は外側容器の主軸に対して常に垂直です。

上記はフレキシブル レイアウトの基本ルールであり、これらのルールを柔軟に活用することで、さまざまな複雑なレイアウト効果を実現できます。実際の開発では、Web サイトがさまざまなブラウザーやデバイス上で正しくレンダリングされ、柔軟なレイアウトを使用できるようにするために、ブラウザーの互換性の問題も考慮する必要があります。

以上がフレキシブル レイアウトのルールは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。