flex布局笔记

 

flex布局：

 

 

容器：

 

 容器主轴方向：

   

 

 

项目的主轴对齐方式：

  

 

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

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

 

项目的交叉轴对齐方式：

  

 

   center：交叉轴的中点对齐。

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

   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 

项目：

 

  子项目放大比例：

     flex-grow:1;  

    

 

     0：默认值，不变形；

     1：等分剩余空间；

     2：比其他为1的项目大一倍；

 

 

 

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

单项双轴对齐控制实例：  

     

 

     

 

多项双轴对齐控制实例： 

    

 

 

    

 

    

 

平均布局：

    

 

 

百分比布局：

  

 

    

  

转载于:https://www.cnblogs.com/thing/p/10302005.html