基本概念
1、主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
2、側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的
3、方向：默認主軸從左向右，側軸默認從上到下
4、主軸和側軸並不是固定不變的，通過flex-direction可以互換
display: flex;//給父盒子加flex屬性，父盒子將具有伸縮屬性，子盒子默認平鋪
效果特征
1、設置了伸縮屬性，在沒有設置寬度的情況下是100%
2、設置了伸縮屬性，行內元素會轉化成塊級元素，可以設置寬高，獨占一行
主軸方向
flex-direction: row;//水平方向（默認） flex-direction: row-reverse;//水平翻轉 flex-direction: column;//垂直方向 flex-direction: column-reverse;//垂直翻轉
對齊方式
1、justify-content：設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
justify-content: flex-start;//從主軸開始的方向對齊 justify-content: flex-end;//從主軸結束的方向對齊 justify-content: center;//居中對齊 justify-content: space-around;//父盒子中平分 justify-content: space-between;//兩端對齊平分
2、align-items：設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items:flex-start;//從側軸開始的方向對齊 align-items:flex-end;//從側軸結束的方向對齊 align-items:center;//居中 align-items:baseline;//基線對齊，默認同flex-start align-items:stretch;//拉伸
參考地址：地址