【基本】.container {
display: flex;
}
【inlineにも使える】
.container {
display: inline-flex;
}
【縦横】
.container {
display: flex;
flex-direction: row; //横
flex-direction: column; //縦
}
【折り返し】
.container {
display: flex;
flex-wrap: wrap; //折り返す
flex-wrap: nowrap; //折り返さない
}
【揃え】
.container {
display: flex;
justify-content: flex-end; //右揃え
justify-content: center; //中央揃え
justify-content: space-between; //要素を均等揃え
justify-content: space-around; //要素の余白を持たせた上で均等揃え
}
【縦方向揃え】
.container {
display: flex;
align-items: center; //縦方向中央揃え
align-items: flex-start; //縦方向上揃え
align-items: flex-end; //縦方向下揃え
}
参考：
【フッター編】
https://public-constructor.com/footer-at-bottom-with-flexbox/
body {
margin: 0;
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
footer {
height: 40px;
}
Thank you!!