justify-content: 説明間のスペース (CSS)
CSS フレックスボックス レイアウトを視覚的に構築します。フレックス方向、コンテンツの位置調整、項目の配置、コンテナ上のフレックスラップとギャップに加え、子ごとのフレックスグロー、フレックスシュリンク、フレックスベースをすべてライブプレビューとコピー可能な CSS で実行できます。
処理中...
0%
結果
このページでは、justify-content が space-between に設定されたジェネレーターが開きます。最初のボックスはコンテナーの開始エッジと同じ高さに配置され、最後のボックスは終了エッジと同じ高さで配置され、残りのスペースは中央のボックス間の均等な間隔に分割されます。最初のボックスの前や最後のボックスの後にはありません。
それが人々が混同する詳細です。 space-around では、すべてのボックスの両側に等しいマージンが与えられるため、ボックス間のギャップは、外側の 2 つのエッジのギャップの 2 倍の幅になります (各エッジにはボックスのマージンが 2 つではなく、1 つだけが与えられます)。空間均等化はさらに進んで、2 つの外側のエッジを含むすべてのギャップを同じサイズにします。3 つのエッジのうち、間隔が全体にわたって完全に均一に見えるのは 1 つだけです。
justify-content ドロップダウンを以下の 3 つの値に切り替えて、同じ 3 つのボックスが再配置されるのを観察します。これは、違いを覚えるのではなく確認する最も速い方法です。実際に必要な間隔に一致する CSS をコピーします。