flex布局实用小集

全局概括

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

1、设置垂直居中

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

<style>
  # 垂直居中，设置父级为
  .flex-vertical-center{
      display: flex;
      align-items: center;
      justify-content: center;
  }
</style>
...
<div class="flex-vertical-center">
  <h2>这是一个垂直居中的布局</h2>
</div>

2、按比例均分自适应

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

  <style>
    .container{
      display: flex;
    }
    h1{
      flex-grow: 1;
    }
    h1:nth-child(1){
      background: red;
      flex-basis: 10%;      
    }
    h1:nth-child(2){
      background: palegoldenrod;
      flex-basis: 20%;      
      
    }
    h1:nth-child(3){
      background: paleturquoise;
      flex-basis: 30%;      
    }
  </style>
...

  <div class="container">
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
  </div>

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

  <style>
    .container{
      display: flex;
    }
    h1:nth-child(1){
      background: red;
      /* flex-basis: 10%;      */
      flex-grow: 1;
    }
    h1:nth-child(2){
      background: palegoldenrod;
      /* flex-basis: 20%;       */
      flex-grow: 2;
    }
    h1:nth-child(3){
      background: paleturquoise;
      /* flex-basis: 30%;      */
      flex-grow: 3;
    }
  </style>
...

  <div class="container">
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
  </div>

如果混搭使用，已经使用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

更新中....

最后编辑于：2018.08.23 10:44:30