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; 下から上に並べる