阅读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  入门篇：关于函数计算角色策略的定义