1.フレックスレイアウトの原則
2.フレックスレイアウトの親アイテムの共通属性
共通の親属性：
1）flex-directionは主軸の方向を設定します
メインシャフトとサイドシャフト：
2）justify-contentは、主軸上のサブ要素の配置を設定します
3）flex-wrap子要素がラップするかどうか
4）align-itemsは、側軸上のサブ要素の配置を設定します（単一行）
5）align-contentは、側軸（複数行）のサブ要素の配置を設定します
align-contentとalign-itemsの違い：
6）フレックスフロー
7）まとめ
3.フレックスレイアウトサブアイテムの一般的な属性
1）フレックスサブアイテムが占めるコピーの数
ケース：
<html>
<head>
<style>
section {
display: flex;
width: 60%;
height: 150px;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
2）align-selfは、横軸上での子供自身の配置を制御します
3）order属性は、サブアイテムの順序を定義します（順序の前後）
教材：
https://www.bilibili.com/video/BV1N54y1i7dG?p=3