flex學習筆記

weixin_34302561發表於2018-05-08
Flex筆記

由於公司專案，一直需要支援ie9；導致作為5年的前端，居然對flex不是熟記於心，不得不二次學習下，（雖然之前學過，寫過demo,但長時間不用，忘了，唉唉唉）

記住flex 佈局核心是，彈性，拋棄了 display position float的佈局方式；

1. 首先容器明確他的2個軸 main axis / cross axis
2. 父容器有6個屬性：(排列方向 換行 主軸/交叉軸/多根軸對齊方式 )

    flex-direction flex-wrap flex-flow 
    justify-content align-items align-content

3. 子容器的6個屬性：（順序 放大 縮小 主軸空間 綜合 子容器沿交叉軸（覆蓋align-items） ）
order flex-grow flex-shrink flex-basis flex align-self

父容器常見的屬性：值

主軸方向：
flex-direction： row/row-reverse/column/column-reverse
換行方式：
flex-wrap：nowrap/wrap/wrap-reverse
主軸與換行：
flex-flow:row nowrap
主軸的對齊方式：
justify-content:flex-start/flex-end/center/space-between/space-around
交叉軸的對齊方式：
align-items:flex-start/flex-end/center/baseline/stretch
多行沿交叉軸對齊：
align-content：flex-start/flex-end/center/space-between/space-around/stretch

子元素常見的屬性和值

order:0; 預設順序
flex-grow:0 /1/2/10/....

當空間多餘時，將多餘的空間，按照放大比例去放大。
例如
當3個子元素的該值分別是1 3 無；多出100px，
則分別在各自的寬高上增加100*1/(1+3) 75px 0;
當空間不足時，該值失效，會按照各自原本的寬高比例去縮放
例如
當3個子元素的該值分別是1 3 無;各自寬度是50 ,200 50 ，總寬是200;
則最終是200*50/(50+200+50),200*200/(50+200+50),200*50/(50+200+50)

flex-shrink:1/5/..

當空間不足時 不足的空間，由子元素通過收縮因子去減小
例如：當3個子元素的該值分別是1 3 沒設定;各自寬度是50 ,200 50 ，父總寬是200;
則分別是50-100*50*1/(1*50+3*200+1*50);
200-100*200*3/(1*50+3*200+1*50);
50-100*50*1/(1*50+3*200+1*50);;
當空間多餘時，該值失效 無意義。

flex-basis:auto/25%/50px/...

flex-basis 規定的是子元素的基準值。初始長度。所以是否溢位的計算與此屬性息息相關。

應用準則：
content –> width –> flex-basis (limted by max|min-width)
flex-basis與width同在時，以flex-basis為準。
建議使用flex-basis，而非直接給定width
但max-width min-width能限制flex-basis。
即：flex-basis: 250px; max-width: 100px; 最終寬度會是100px；
即：flex-basis: 100px; min-width: 250px; 最終寬度會是100px；

}

注意：
有flex-basis，有寬高，沒設定flex-shrink。flex-grow，空間不足或多餘時，都以該值為準，不收縮，也不擴張。
空間不足時，有flex-shrink,且有寬度,以flex-basis為基準，去計算不足的空間

flex:0 0 100%
align-self：**,取代align-items;item有自己獨特的在交叉軸上的對齊方式

不容易理解的屬性解釋：
flex-basis :表示在不伸縮的情況下子容器的原始尺寸。主軸為橫向時代表寬度，主軸為縱向時代表高度。
flex-wrap：設定換行方式,決定子容器是否換行,順序換行還是支援逆序換行。
align-content:多行沿交叉軸對齊：當子容器多行排列時，設定行與行之間的對齊方式。

細講下flex

flex 是 flex-grow、flex-shrink、flex-basis的縮寫
flex 的預設值是 0 1 auto。
當 flex 取值為 none，則計算值為 0 0 auto，
當 flex 取值為 auto，則計算值為 1 1 auto，
當 flex 取值為 1，則計算值為 1 1 0%，
當 flex 取值為一個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情況（注意 0% 是一個百分比而不是一個非負數字）：
當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，
當 flex 取值為一個非負數字和一個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，
flex:24px; // 1 1 24px
flex:0%; // 1 1 24px
flex:2 ; // 2 1 0%
flex:2 3; // 2 3 0%
flex:2 20%; // 2 1 20%

demo

用flex 寫一個聖盃佈局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-聖盃佈局</title>
    <style type="text/css">
.Grid{
  width:100%;
  display: flex;
  flex-direction:column;
   min-height: 100vh;
} 
.main{
    flex:1;
    display: flex;
}
.header,.footer{height:100px;}

.aa{flex:1;}
.aa1,.aa3{ width:10vw;}
.aa2{ width:25%;}
.aa0{width:50% }
    </style>
 

</head>
<body>
   
  <div class="Grid">
          <div class="header">
              <div class="aa aa0">12</div>
               <div class="aa aa1">34</div>
               <div class="aa aa2">56</div>
          </div>
          <div class="main">
              <div class="aa1">ddd</div>
              <div class="aa">.gg.</div>
              <div class="aa">..gg.</div>
              <div class="aa3">..gg.</div>
          </div>
          <div class="footer">..fgfgfg.</div>
</div>
</body>
</html>

相關文章