zoukankan      html  css  js  c++  java
  • flex布局笔记

     

    flex布局:

     

    容器:

     

     容器主轴方向:

       

     

    项目的主轴对齐方式:

      

      space-between:两端对齐,项目之间的间隔都相等。

      space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

     

    项目的交叉轴对齐方式:

      

       center:交叉轴的中点对齐。

       baseline: 项目的第一行文字的基线对齐。

       stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

     

    项目:

     

      子项目放大比例:

         flex-grow:1;  

        

         0:默认值,不变形;

         1:等分剩余空间;

         2:比其他为1的项目大一倍;

     

     

     

    ————————————————————————————————————————————————————————

    单项双轴对齐控制实例:  

         

         

     

    多项双轴对齐控制实例: 

        

     

        

     

        

     

    平均布局:

        

     

    百分比布局:

      

        

      

  • 相关阅读:
    platform cannot apply stanford theme
    汉化、用户创建
    修改字段
    语言包格式错误引起组件崩溃
    配置LMS/Studio SMTP
    Javascript如何实现AOP
    【转】组件化的Web王国
    【转】前端组件化框架之路
    【转】ES6 手册
    【转】超实用的JavaScript技巧及最佳实践
  • 原文地址:https://www.cnblogs.com/thing/p/10302005.html
Copyright © 2011-2022 走看看