簡介

flex布局(Flexible布局，彈性布局)是在開發(fā)中經(jīng)常使用的布局方式
開啟了flex布局的元素叫flex container，flex container里面的直接子元素叫做flex items
設(shè)置display屬性為flex或者inline-flex，則表示為flex布局，可以成為flex container

display: flex; //flex container以block-level(塊級)形式存在
display:inline-flex; //flex container以inline-level(行內(nèi)塊)形式存在

官方文檔

https://www.w3.org/TR/CSS-FLEXBOX-1/
https://www.w3.org/TR/css-align-3/

常用CSS屬性-應(yīng)用在flex container上的CSS屬性

1. flex-direction
   flex items默認都是沿著主軸(main axis)從main start開始往main end方向排布，flex-direction決定了主軸(main axis)的方向，有4個取值 row(默認值)、row-reverse、column、column-reverse
   交叉軸(cross axis)總是垂直于主軸，方向為向下或者向右

flex-direction: row; //默認值，從左向右
                        row-reverse; //從右向左
                         column;//從上向下
                         column-reverse;//從下向上

2. justify-content
   justify-content決定了flex items在主軸(main axis)上的對齊方式，有6個取值 flex-start(默認值)、flex-end、center、space-between、space-around、space-evenly

justify-content: flex-start;//與main start對齊
flex-end;//與main end對齊
center;//居中對齊
space-between;//flex items之間的距離相等，并且主軸方向兩端對齊
space-evenly;//flex items之間的距離相等，并且等于flex items與兩端之間的距離，相當(dāng)于flex items將剩余距離平分
space-around;//flex items之間的距離相等，并且等于flex items與兩端之間的距離的一半

3. align-items
   align-items決定了flex items在交叉軸上的對齊方式，有5個取值stretch、flex-start、flex-end、center、baseline

align-items:stretch;//(默認值)當(dāng)flex items在交叉軸方向的size為auto時，會自動拉伸填充flex container
flex-start;//與cross start(交叉軸起點)對齊
flex-end;//與cross end(交叉軸終點)對齊
center;//與cross axis居中對齊
baseline;//基準線對齊，文字基準線

4. flex-wrap
   flex-wrap決定了flex container是單行還是多行，要不要換行，默認為單行，有3個取值nowrap(默認)、wrap、wrap-reverse

flex-wrap: nowrap;//默認值，單行，不換行
wrap;//多行
wrap-reverse;//多行(對比wrap，交叉軸start與交叉軸end相反)

5. flex-flow
   flex-flow是flex-direction || flex wrap的簡寫

flex-flow: column wrap；等價于
flex-direction: column;
flex-wrap: wrap;
//從上到下排列，并且多行顯示

6. align-content
   align-content決定多行flex items在交叉軸上的對齊方式，用法與justify-content類似，有7個取值stretch(默認值)、 flex-start、flex-end、center、space-between、space-around、space-evenly

align-content:stretch;//(默認值)當(dāng)flex items在交叉軸方向的size為auto時，會自動拉伸填充flex container
 flex-start;//與cross start對齊
flex-end;//與cross end對齊
center;//居中對齊
space-between;//flex items之間的距離相等，并且交叉軸方向兩端對齊
space-evenly;//flex items之間的距離相等，并且等于flex items與兩端之間的距離，相當(dāng)于flex items將剩余距離平分
space-around;//flex items之間的距離相等，并且等于flex items與兩端之間的距離的一半

常用CSS屬性-應(yīng)用在flex items上的CSS屬性

1. order
   order決定了flex items的排布順序，可以設(shè)置任意整數(shù)(正整數(shù)、負整數(shù)、0)，值越小就越排在前面，默認值為0
2. align-self
   flex-items可以根據(jù)align-self覆蓋flex container設(shè)置的align-items，有6個取值auto(默認值)、stretch、flex-start、flex-end、center、baseline

align-self:auto;//默認值，遵從flex container的align-items的設(shè)置
其他五個值效果參考align-items，效果一致

3. flex-grow
   flex-grow決定了flex items如何擴展，可以設(shè)置任意非負數(shù)字(正小數(shù)、正整數(shù)、0)，默認值是0，
   需要注意的是：

• 當(dāng)flex container在主軸(main axis)方向上有剩余size時，flex-grow屬性才會有效
• 如果所有flex items 的flex-grow總和sum超過1，每個flex item 擴展的size為 剩余size*flex-grow / sum
• 如果所有flex items 的flex-grow總和sum不超過1，每個flex item 擴展的size為 剩余size*flex-grow
• flex items擴展后的最終size不能超過設(shè)置的max-width/max-height

4. flex-shrink
   flex-shrink 決定了 flex items 如何收縮 ，可以設(shè)置任意非負數(shù)字(正小數(shù)、正整數(shù)、0)，默認值是 1
   需要注意：

• 當(dāng) flex items 在 main axis 方向上超過了 flex container 的 size，flex-shrink 屬性才會有效
• 如果所有 flex items 的 flex-shrink 總和超過 1，每個 flex item 收縮的 size為 flex items 超出 flex container 的 size * 收縮比例 / 所有 flex items 的收縮比例之和
• 如果所有 flex items 的 flex-shrink 總和 sum 不超過 1，每個 flex item 收縮的 size為 ?flex items 超出 flex container 的 size * sum * 收縮比例 / 所有 flex items 的收縮比例之和
• 收縮比例 = flex-shrink * flex item 的 base size ，base size 就是 flex item 放入 flex container 之前的 size
• flex items 收縮后的最終 size 不能小于 min-width\min-height

5. flex-basis
   flex-basis 用來設(shè)置 flex items 在 main axis 方向上的 base size 有2個取值：auto(默認值)、content:取決于內(nèi)容本身的 size

• 決定 flex items 最終 base size 的因素，從優(yōu)先級高到低 max-width\max-height\min-width\min-height > flex-basis >width\height>內(nèi)容本身的 size

6. flex
   flex是flex-grow flex-shrink？|| flex-basis的簡寫

flex: 0 1 auto;//默認值  本身的值
none;//0 0 auto  不顯示

此篇文章參考小碼哥flex布局，特此感謝！