Flexbox の配置、間隔の調整CSS(display: flex)

display: flex; 内の配置を操作するコード[ justify-content ]

複数の要素を横並びにするために display: flex; をつけたが、うまく右寄せができない

display: flex; を右寄せにするには right: 0; でも text-align: right; でもなく justify-content: right;

justify-content とは？

justify-content とは flexbox 内の要素の位置を指定するプロパティ

他にも下記の配置がある

• 右寄せ： [end;] [right;] [flex-end;]
• 左寄せ： [start;] [left;] [flex-start;]
• 中央寄せ： [center;]
• 等間隔： [space-between;] [space-around;] [space-evenly;]

3種類の等間隔並び

等間隔並びには3種類あります

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

• between = 両端の余白はなし
• around = 両端に要素の間の余白の半分の大きさの余白
• evenly = 両端に要素の間の余白と同じ大きさの余白