横並び（基本）
子要素を横一列
.container {
display: flex;
}縦並び
子要素を縦に
.container {
display: flex;
flex-direction: column;
}子要素の中央揃え
画面中央に要素を配置
.container {
display: flex;
justify-content: center; /* 水平方向中央 */
align-items: center; /* 垂直方向中央 */
height: 100vh; /* 画面全体で中央配置 */
}均等配置
子要素間のスペースを均等に保ちつつ、良い感じに揃えます
.container {
display: flex;
justify-content: space-between; /* 左右の余白を均等 */
}高さを揃える
子要素の高さを均一に
.container {
display: flex;
align-items: stretch;
}