flex布局笔记

flex布局：

容器：

 容器主轴方向：

项目的主轴对齐方式：

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

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

项目的交叉轴对齐方式：

   center：交叉轴的中点对齐。

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

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

项目：

  子项目放大比例：

     flex-grow:1;  

     0：默认值，不变形；

     1：等分剩余空间；

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

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

单项双轴对齐控制实例：  

多项双轴对齐控制实例： 

平均布局：

百分比布局：

flex布局笔记

原文：https://www.cnblogs.com/thing/p/10302005.html