flexbox 左・中央・右寄せ方法 justify-content

CSS flexboxでよく使われる整列方法「justify-content」について紹介します。

整列


justify-content: center;     /* 中央 */
justify-content: start;      /* 先頭 */
justify-content: end;        /* 末尾 */
justify-content: left;       /* 左端*/
justify-content: right;      /* 右端 */
justify-content: flex-start; /* flexbox限定 先頭 */
justify-content: flex-end;   /* flexbox限定 末尾 */

flex-start と start の違いは?
flex-start は flexbox にしか使用できません。
start は flexbox以外のボックスレイアウトに使用できます。他のボックスレイアウトには grid などがあります。
使用する場合は start 又は end をオススメします。

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。