柔軟なレイアウトのためのCSS3を使用する場合のコンテンツの配置方法の詳細な説明

この記事では主に CSS3 の Elastic Layout のコンテンツ配置 (justify-content) 属性の使用方法について詳しく説明します。興味のある方は学習してください。

コンテンツの配置 (justify-content) を適用します。 ) 属性をエラスティック コンテナに追加すると、フレックス アイテムがフレックス コンテナの主軸に沿って配置されます。

この操作は、弾性長さと自動マージンが決定された後に発生します。 これは、空き領域が存在する場合にそれを割り当てるために使用され、コンテンツがオーバーフローした場合の項目の配置にも影響します。

注: フレキシブル レイアウトには、主軸と交差軸という 2 つの基本的な用語があります。一般的に、これらは画面上の行方向と列方向と考えることができます (ただし、厳密に言えば、これは書き込みモードと同じです)。弾性流の方向に依存します)。

すると、main-start と main-end はそれぞれエラスティックコンテナの左側と右側とみなすことができます。

justify-content の構文は次のとおりです:

justify-content: flex-start | flex-end | center | space-between | space-around

パラメーターは次のとおりです:

flex-start

flex 項目は先頭の横に入力されます。この線。これがデフォルト値です。最初の flex アイテムの main-start マージン エッジは行の main-start エッジに配置され、後続の flex アイテムは順番に同一面に配置されます。

flex-end

Flex 項目は行の終わりに向かってパディングされます。最初のフレックス アイテムのメインエンド マージン エッジは行のメインエンド エッジに配置され、後続のフレックス アイテムは順番に同一面に配置されます。

center

フレックス項目はパディングの隣の中央に配置されます。 (残りの空き領域が負の場合、フレックス項目は両方向にオーバーフローします)。

スペース間の

フレックス項目は行に均等に配置されます。残りのスペースが負の場合、またはフレックス項目が 1 つしかない場合、この値は flex-start と同等です。それ以外の場合、最初のフレックス項目のマージンは行のメイン開始端に位置合わせされ、最後のフレックス項目のマージンは行のメイン終了端に位置合わせされてから、残りのフレックス項目が配置されます。項目は等間隔に配置されます。

スペースアラウンド

Flex アイテムは行上に均等な間隔で配置され、両側に半分のスペースが残ります。残りのスペースが負の場合、またはフレックス項目が 1 つしかない場合、この値は center と等価です。それ以外の場合、フレックス アイテムは、最初と最後の辺とフレックス コンテナーの間に半分のスペース (1/2*20px=10px) を残しながら、互いに等間隔 (たとえば 20px) で行に沿って分散されます。

Justify-content 属性値の効果の例

上の図は、上記の 5 つの値の効果と違いを直感的に示しています。

以上が柔軟なレイアウトのためのCSS3を使用する場合のコンテンツの配置方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。