閱讀222 返回首頁    go 阿裏雲 go 技術社區[雲棲]

display:flex; 布局

  • 給父元素添加 
    

      

    1. display:flex;
      2. 

    2. display:-webkit-flex;
      3. 

      4. 

    4. flex-direction: row | row-reverse | column | column-reverse;  屬性決定主軸的方向（即項目的排列方向）
      5. 

    5. row（默認值）：主軸為水平方向，起點在左端。
      6. 

    6. row-reverse：主軸為水平方向，起點在右端。
      7. 

    7. column：主軸為垂直方向，起點在上沿。
      8. 

    8. column-reverse：主軸為垂直方向，起點在下沿。
      9. 

      10. 

    10.  flex-wrap: nowrap | wrap | wrap-reverse;
      11. 

    11. nowrap（默認）：不換行。
      12. 

    12. wrap：換行，第一行在上方。
      13. 

      14. 

    14. flex-flow: <flex-direction> || <flex-wrap>;    row nowrap
      15. 

      16. 

    16.  justify-content: flex-start | flex-end | center | space-between | space-around;
      17. 

    17. flex-start（默認值）：左對齊
      18. 

    18. flex-end：右對齊
      19. 

    19. center： 居中
      20. 

    20. space-between：兩端對齊，項目之間的間隔都相等。
      21. 

    21. space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
      22. 

      23. 

    23.  align-items: flex-start | flex-end | center | baseline | stretch;
      24. 

    24. flex-start：交叉軸的起點對齊。
      25. 

    25. flex-end：交叉軸的終點對齊。
      26. 

    26. center：交叉軸的中點對齊。
      27. 

    27. baseline: 項目的第一行文字的基線對齊。
      28. 

    28. stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
      29. 

    

    


    

    • 

  • 給子元素添加

    

    

      

    1. order            屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
      2. 

    2. flex-grow     屬性定義項目的放大比例，默認為0，即如果存在剩餘空間，也不放大。
      3. 

    3. flex-shrink   屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
      4. 

    4. flex-basis    屬性定義了在分配多餘空間之前，項目占據的主軸空間（main size）。
      5. 

    5. flex               屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。0 0 30p x
      6. 

    6. align-self
      7. 

    

    


    

    • 



常用布局：


sticker footer ：容器有最小高度，內容超出最小高度自動撐開，容器內底部有一個固定元素item，容器內沒有內容時，item在容器底部，內容超出容器後，容器被撐開，item依然在底部。








    

  1. box{
    2. 

  2. 	display:flex;
    3. 

  3. 	flex-direction:column;
    4. 

  4. }
    5. 

  5. .top{
    6. 

  6. 	flex:1;
    7. 

  7. }
    8. 





第二種布局










    

  1. <div class="box2">
    2. 

  2.     <div class="content2">
    3. 

  3.         <div class="inner">
    4. 

  4.             <p>fsf</p>
    5. 

  5.             <p>fsf</p>
    6. 

  6.             <p>fsf</p>
    7. 

  7.         </div>
    8. 

  8.     </div>
    9. 

  9.     <div class="footer2">X</div>
    10. 

  10. </div>
    11. 

    12. 

    13. 

  13. .box2{
    14. 

  14.             border:2px solid red;
    15. 

  15.             border-radius:2px;
    16. 

  16.             width:200px;
    17. 

  17.             height:200px;
    18. 

  18.             margin:20px auto 0;
    19. 

  19.             overflow: auto;
    20. 

  20.         }
    21. 

  21.         .content2{
    22. 

  22.             width:100%;
    23. 

  23.             min-height:100%;
    24. 

    25. 

  25.         }
    26. 

  26.         .inner{
    27. 

  27.             padding-bottom:35px;
    28. 

  28.         }
    29. 

  29.         .footer2{
    30. 

  30.             position:relative;
    31. 

  31.             margin:-40px auto;
    32. 

  32.             clear: both;
    33. 

  33.         }
    34. 











































    
    
        

最後更新：2017-07-26 11:03:18
  上一篇：go  mac 配置本地apache 
  下一篇：go  入門篇：關於函數計算角色策略的定義