flex布局实用小集

全局概括

在 flex 容器中默认存在两条轴，水平主轴 main axis 和垂直的交叉轴 cross axis ，这是默认的设置，可以通过修改使垂直方向变为主轴，水平方向变为交叉轴

1、设置垂直居中

align-items：定义了项目在交叉轴上的对齐方式
justify-content：定义了项目在主轴的对齐方式

...

  
这是一个垂直居中的布局

2、按比例均分自适应

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
flex-grow：定义项目的放大比例

  
...

  

    
1
    
2
    
3
  

三个子元素会按照flex-basis设置的比例1：2：3来布局，但并不会占满父级，此时加上flex-grow: 1;他们会使用原来的比例占满父级，如果只使用flex-grow属性达到比例分割的效果：

  
...

  

    
1
    
2
    
3
  

如果混搭使用，已经使用flex-basis分好了比例1：2：3此时设置第一个h1为flex-grow: 2;也就是放大了2倍，那么最终显示的比例就是2：2：3

其它相关属性：

当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性
flex-shrink：定义了项目的缩小比例
默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效
例如有6个div：每个项目都设置了宽度为 50px，但是由于自身容器宽度只有 200px，这时候每个项目会被同比例进行缩小，因为默认值为 1

上边提到的 flex-wrap决定容器内项目是否可换行
默认值 nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行

缩写

看到这里，说一下缩写格式
flex：flex-grow、flex-shrink 和 flex-basis 的简写
默认值：0 1 auto， 即不放大，可缩小，大小与 width、height

更新中....