displayで横並び
- display: block; 指定された要素は、ブロックレベル要素として表示
- display: inline; 指定された要素は、インライン要素として表示
- display: inline-block; 指定された要素は、並びはインライン要素だが、中身はブロックレベル要素として表示
- display: flex; 指定された要素の子要素が横並び
- display: none; 指定された要素は、非表示
justify-contentの使い方
- justify-content: flex-start; 左寄せ
- justify-content: flex-end; 右寄せ
- justify-content: center; 中央寄せ
- justify-content: space-between; 両端が左右に寄り、等間隔
- justify-content: space-around; 両端が左右に寄り、等間隔、両端の余白と要素間の余白が1:2
align-items
align-items: ◯◯;といった形で表記し、display: flex;と併せて使用
(例)
- align-items: flex-start; 上揃え
- align-items: flex-end; 下揃え
- align-items: center; 中央揃え
flex-direction
- flex-direction: row; 左から右に並べる
- flex-direction: row-reverse; 右から左に並べる
- flex-direction: column; 上から下に並べる
- flex-direction: column-reverse; 下から上に並べる