最終更新日
justify-contentは、フレキシブルボックス内でのボックスの詰め方を指定するプロパティです。
値には、flex-start、flex-end、center、space-between、space-aroundのいずれか1つを指定します。
初期値 | 適用先 | 継承 |
---|---|---|
flex-start | 「display: flex;」か「display: inline-flex;」が指定された要素 | なし |
値 | 説明 |
---|---|
flex-start | 内部のボックスを、フレキシブルボックスの先頭に詰めて配置します。(初期値) |
flex-end | 内部のボックスを、フレキシブルボックスの末尾に詰めて配置します。 |
center | 内部のボックスを、フレキシブルボックスの中央に詰めて配置します。 |
space-between | 内部のボックスを、フレキシブルボックス全体へ均等に配置します。先頭と末尾は詰めて配置されます。 |
space-around | 内部のボックスを、フレキシブルボックス全体へ均等に配置します。先頭と末尾にはスペースが入ります。 |
justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around;