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

     

    flex布局:

     

    容器:

     

     容器主轴方向:

       

     

    项目的主轴对齐方式:

      

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

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

     

    项目的交叉轴对齐方式:

      

       center:交叉轴的中点对齐。

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

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

     

    项目:

     

      子项目放大比例:

         flex-grow:1;  

        

         0:默认值,不变形;

         1:等分剩余空间;

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

     

     

     

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

    单项双轴对齐控制实例:  

         

         

     

    多项双轴对齐控制实例: 

        

     

        

     

        

     

    平均布局:

        

     

    百分比布局:

      

        

      

  • 相关阅读:
    软件工程第四次作业
    软件工程第三次作业
    图片
    软件工程第二次作业
    软件工程第一次作业
    我的大学生活-3-35-任延勇
    我的未来只有我知道
    cpu占用率高排查知识点
    LeetCode字符串题目
    hashmap
  • 原文地址:https://www.cnblogs.com/thing/p/10302005.html
Copyright © 2011-2022 走看看