若要使用flex佈局，需在父元素上宣告“ display : flex ”,這樣它所有的直系子元素就成為flex元素
1.居中
1）垂直居中：align-items : center
2）水平居中：justify-conter : center
3）垂直水平居中：align-items : center;
justify-content : center;
2.橫向排列元素
div:nth-child(1) { justify-content: flex-start; } -------- 居左
div:nth-child(2) { justify-content: flex-end; } -------- 居右
div:nth-child(3) { justify-content: space-between; } ------- 首尾兩個元素挨著容器邊緣，中間的其他元素平均排列
div:nth-child(4) { justify-content: space-around; } -------- 首尾兩個元素與容器邊框的距離是元素之間間距的一半，各元素平均排列。
3.縱向排列元素
當子元素縱向排列時，在容器中增加 "flex-direction: column"
4.軸
flex佈局引入了“軸”的概念(即像數軸那樣有方向的線)
flex軸型別：
主軸：子元素延伸的方向，
交叉軸：與“主軸”垂直的軸
flex-direction：用於設定主軸的方向，預設:row (另一個：column)
justify-content：center ，表示子元素在主軸方向上居中；
align-items：center，表示子元素在交叉軸方向上居中；
隨著主軸方向的變化，這兩個屬性的含義會發生變化，如表1-1
表1-1
| 主軸方向 | flex-direction | justify-content:center | align-items:center |
| 從左到右 | row | 水平居中 | 垂直居中 |
| 從上到下 | column | 垂直居中 | 水平居中 |
-------------------------------------------------------------------------------------------------------------------------