CSS3エラスティックレイアウトのコンテンツ配置（justify-content）の使い方の詳細説明attribute_html/css_WEB-ITnose

justify-content 属性は、フレックス コンテナの主軸に沿ってフレックス アイテムを配置するためにフレックス コンテナに適用されます。

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

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

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

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

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

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

flex-end
Flex 項目は行の終わり近くに埋め込まれます。最初のフレックス アイテムのメインエンド マージン エッジは行のメインエンド エッジに配置され、後続のフレックス アイテムは順番に同一面に配置されます。
center
フレックス項目はパディングの隣の中央に配置されます。 (残りの空き領域が負の場合、フレックス項目は両方向にオーバーフローします)。
space-between
flex アイテムは行に均等に配置されます。残りのスペースが負の場合、またはフレックス項目が 1 つしかない場合、この値は flex-start と同等です。それ以外の場合、最初のフレックス項目のマージンは行のメイン開始端に位置合わせされ、最後のフレックス項目のマージンは行のメイン終了端に位置合わせされてから、残りのフレックス項目が配置されます。項目は等間隔に配置されます。
スペースアラウンド
Flex アイテムは行に均等に配置され、両側に半分のスペースが残ります。残りのスペースが負の場合、またはフレックス項目が 1 つしかない場合、この値は center と等価です。それ以外の場合、フレックス アイテムは、最初と最後の辺とフレックス コンテナーの間に半分のスペース (1/2*20px=10px) を残しながら、互いに等間隔 (たとえば 20px) で行に沿って分散されます。

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

オンラインのサンプル コードを通じて自分でテストできます:

http://wow.techbrood.com/fiddle/17128

by iefreer