什麼是flex佈局？
Flex是Flexible Box的縮寫，意味"彈性佈局"，任何一個容器都可以指定為Flex佈局
flex的基本概念？
- Flex佈局元素，稱為Flex容器，簡稱"容器"。它的所有子元素自動成為容器元素，簡稱"專案"。
- 容器預設存在兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的排列方式：從左到右；交叉軸的排列方式：從上到下;
容器的屬性
1、flex-direction :屬性決定主軸的方向 (即專案的排列方式）
flex-direction：row （主軸水平方向，起點在左端）
flex-direction：row-reverse （主軸水平方向，起點在右端）
flex-direction：column （主軸垂直方向，起點在上沿）
flex-direction：column-reverse （主軸在垂直方向，起點在下沿）
2、flex-wrap : 預設情況下，專案都排在一條線（又稱"軸線"上）
flex-wrap：nowarp （不換行，預設的)
flex-wrap：wrap （換行，第一行在上面）
flex-wrap：wrap-reverse （換行，第一行在下面）
3、flex-flow：是flex-direction 屬性和flex-wrap屬性的簡寫，預設值row、nowrap
4、justify-content：屬性定義了專案在主軸上的對齊方式
justify-content：flex-start （左對齊，預設值）
justify-content：flex-end（右對齊）
justify-content：center （居中）
justify-content：space-between （兩端對齊，專案之間的間隔相等）
justify-content：space-around （每個專案兩側的間距相等）
5、align-items :定義專案交叉軸上如何對齊（單行）
align-items：flex-start （交叉軸起點對齊）
align-items: flex-end （交叉軸終點對齊）
align-items：center （垂直方向，中間開始）
align-items：baseline （專案第一行文字的基線對齊）
align-items：stretch （預設值，如果專案未設定高度或設為auto,將佔滿整個容器的高度)
6、align-content :多行軸線對齊（用法同align-items ）
flex專案屬性
1、order 定義專案排列順序
order：number （數值越小越靠前，預設為0）
2、flex-grow 定義專案放大比例
flex-grow ：number（預設0，如果有剩餘空間也不放大，值為1放大，2是1的雙倍大小，此類推）
3、flex-shrink 定義專案縮小比例
flex-shrink ：number （預設為1，如果空間不足則會縮小，值為0不能縮小）
4、flex-basis 定義專案自身大小
flex-basis ：number/auto （預設auto，可設定固定的值50px/50%）
5、flex：屬性是flex-grow，flex-shrink ,flex-basis的簡寫，預設值為0、1、auto
6、align-self 專案自身對齊
align-self ：auto | flex-start | flex-end | center | baseline | stretch
最後
如果本文對你有幫助得話，給本文點個贊❤️❤️❤️
歡迎大家加入，一起學習前端，共同進步！
