關於flex佈局的應用

什麼是flex佈局？

Flex是Flexible Box的縮寫，意味"彈性佈局"，任何一個容器均可以指定爲Flex佈局

flex的基本概念？

• Flex佈局元素，稱爲Flex容器，簡稱"容器"。它的全部子元素自動成爲容器元素，簡稱"項目"。
• 容器默認存在兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的排列方式：從左到右；交叉軸的排列方式：從上到下;

  

容器的屬性

一、flex-direction :屬性決定主軸的方向 (即項目的排列方式）

flex-direction：row （主軸水平方向，起點在左端）

flex-direction：row-reverse （主軸水平方向，起點在右端）

flex-direction：column （主軸垂直方向，起點在上沿）

flex-direction：column-reverse （主軸在垂直方向，起點在下沿）

二、flex-wrap : 默認狀況下，項目都排在一條線（又稱"軸線"上）

flex-wrap：nowarp （不換行，默認的)

flex-wrap：wrap （換行，第一行在上面）

flex-wrap：wrap-reverse （換行，第一行在下面）

三、flex-flow：是flex-direction 屬性和flex-wrap屬性的簡寫，默認值row、nowrap

四、justify-content：屬性定義了項目在主軸上的對齊方式

justify-content：flex-start （左對齊，默認值）

justify-content：flex-end（右對齊）

justify-content：center （居中）

justify-content：space-between （兩端對齊，項目之間的間隔相等）

justify-content：space-around （每一個項目兩側的間距相等）

五、align-items :定義項目交叉軸上如何對齊（單行）

align-items：flex-start （交叉軸起點對齊）

align-items: flex-end （交叉軸終點對齊）

align-items：center （垂直方向，中間開始）

align-items：baseline （項目第一行文字的基線對齊）

align-items：stretch （默認值，若是項目未設置高度或設爲auto,將佔滿整個容器的高度)

六、align-content :多行軸線對齊（用法同align-items ）

flex項目屬性

一、order 定義項目排列順序

order：number （數值越小越靠前，默認爲0）

二、flex-grow 定義項目放大比例

flex-grow ：number（默認0，若是有剩餘空間也不放大，值爲1放大，2是1的雙倍大小，此類推）

三、flex-shrink 定義項目縮小比例

flex-shrink ：number （默認爲1，若是空間不足則會縮小，值爲0不能縮小）

四、flex-basis 定義項目自身大小

flex-basis ：number/auto （默認auto，可設置固定的值50px/50%）

五、flex：屬性是flex-grow，flex-shrink ,flex-basis的簡寫，默認值爲0、一、auto

六、align-self 項目自身對齊

align-self ：auto | flex-start | flex-end | center | baseline | stretch