フレキシブル レイアウト コンテナーとは何ですか?

フレキシブル レイアウトのコンテナとは、フレキシブル レイアウト テクノロジを適用する親要素を指します。コンテナーのプロパティと値を設定することで、コンテナー内の子要素の配置、位置合わせ、およびスケールの方法を制御できます。共通のフレキシブル レイアウト コンテナーのプロパティ: 1. 表示、コンテナーをフレキシブル レイアウトに設定します。2. flex-direction、主軸の方向を設定します。3. flex-wrap、サブ要素のラップを許可するかどうかを指定します。4. justify-content、ラップするサブ要素の設定、主軸上の要素の配置、5. align-itemsなど

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

Flexbox は、柔軟で適応性のあるレイアウトを作成するためのテクノロジであり、さまざまな画面サイズやデバイスにわたって要素を配置および位置合わせする簡単な方法を提供します。

フレキシブル レイアウトのコンテナとは、フレキシブル レイアウト テクノロジを適用する親要素を指します。コンテナーのプロパティと値を設定することで、コンテナー内の子要素の配置、位置合わせ、およびスケールの方法を制御できます。

フレキシブル レイアウトには、主軸と交差軸という 2 つの主要な概念があります。主軸とは、コンテナ内で要素が配置される方向を指し、水平 (左から右) または垂直 (上から下) の場合があります。交差軸は主軸に対して垂直であり、要素を位置合わせするために使用されます。

次に、フレキシブル レイアウト コンテナーの一般的なプロパティをいくつか示します。

display: コンテナーをフレキシブル レイアウトに設定します。表示プロパティを flex または inline-flex に設定して、コンテナーをフレキシブル レイアウトとして定義します。 flex はブロックレベル要素を表し、inline-flex はインライン要素を表します。

flex-direction: 主軸の方向を設定します。デフォルト値は row で、主軸が水平であることを意味します。その他の値には、column (主軸が垂直)、row-reverse (主軸が水平で要素が右から左に配置される)、column-reverse (主軸が垂直で要素が下から左に配置される) が含まれます。上）。

flex-wrap: サブ要素のラップを許可するかどうかを指定します。デフォルトでは、フレックスコンテナ内のすべての子要素は可能な限り近くに配置されます。 flex-wrap 属性を Wrap に設定すると、子要素を折り返す必要があるときに自動的に折り返すことができます。

justify-content: 主軸上の子要素の配置を設定します。このプロパティを使用して、コンテナ内の子要素の水平位置を制御できます。一般的な値には、flex-start (左揃え)、flex-end (右揃え)、center (中央揃え)、space-between (主軸上に均等に分布)、space-around (主軸上に均等に分布) が含まれます。主軸、両側に左マージンあり）、空白あり）など。

align-items: 交差軸上の子要素の配置を設定します。このプロパティを使用して、コンテナ内の子要素の垂直位置を制御できます。一般的な値には、flex-start (上揃え)、flex-end (下揃え)、center (中央揃え)、baseline (テキスト ベースラインの最初の行に揃える)、stretch (コンテナ全体を満たすように伸ばす) などが含まれます。 。

align-content: 複数行の子要素の交差軸上の配置を設定します。子要素に複数の行がある場合、この属性を使用して、コンテナ内の複数行の子要素の垂直位置を制御できます。共通の値は align-items と似ています。

上記は、フレキシブル レイアウトのコンテナー属性の一般的な使用法の一部です。これらのプロパティと値を調整することで、さまざまなレイアウト効果を簡単に作成できます。エラスティック レイアウトのコンテナ属性は、レスポンシブ デザインやモバイル デバイスなどのさまざまなアプリケーション シナリオに適した、より柔軟で適応性のあるレイアウト方法を提供します。

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