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 = 両端に要素の間の余白と同じ大きさの余白
