css flex

flex介绍

flex是弹性盒布局的意思，用来为盒子模型提供灵活性。采用flex布局的盒子叫做容器，它的子元素叫做项目；容器有水平的主轴和与它垂直的交叉轴。如下图所示：

flex.png

如果你是已经了解flex布局的小伙伴，仅仅用来查询一下它们可以设置的属性值以及兼容的版本，那么下面的容器属性查询表和项目属性查询表就满足你的需求啦～如果还不了解每个的具体实现效果，那就认真实现下面的例子吧

容器的属性查询表

image.png

项目的属性查询表

image.png

兼容性查询表

flex.png

flex布局应用及详解

我们通过一个实际的🌰来看看flex到底能做什么吧。现在我们的🀄️上场了，从1饼到9饼用flex怎么排布呢？就拿几个典型的的来实践一下（下面会展示1，3，5，9实现方式）

1. 首先我们来实现“1饼”的效果

flex-demo1.png

• 第一步设置一个容器作为外框display: flex
• 第二步增加一个项目作为“饼”
• 第三步让项目在主轴方向上居中justify-content: center
• 第四步让项目在交叉轴居中align-items: center
  好了拆解完成，直接上代码

    <div class="wrap">
       <div class="box"></div>
    </div>

    .wrap {
        width: 200px;
        height: 300px;
        border: 1px solid #ddd;
        border-radius: 10px;
        margin: 20px auto;
        /* flex 相关 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        width: 50px;
        height: 50px;
        background-color: #666;
        border-radius: 25px;
    }

2. 然后我们来实现“3饼”的效果

flex-demo2.png

• 第一步设置一个容器作为外框display: flex
• 第二步设置项目排列方向为竖向flex-direction: column
• 第三步设置主轴两端对齐justify-content: space-around
• 第四步设置交叉轴居中对齐
• 第五步设置单个项目与其他项目不同的对齐方式align-self
  上代码

    <div class="wrap">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
    </div>

    .wrap {
        width: 20px;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 20px auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }

    .box {
        width: 6px;
        height: 6px;
        background-color: #666;
        border-radius: 3px;
    }

    .box1 {
        align-self: flex-start;
    }

    .box3 {
        align-self: flex-end;
    }

3. 加油实现“5饼”的效果

flex-demo3.png

• 第一步设置容器 display: flex
• 第二步设置换行flex-wrap: wrap
• 第三步设置嵌套的项目为容器 display: flex
• 第四步设置在主轴上两端对齐justify-content: space-around
• 第五步设置在交叉轴上居中对齐align-items: center
• 第六步设置项目占据主轴的空白空间flex-basis: 100%
  好了，上代码

    <div class="wrap">
      <div class="column">
        <div class="box box1"></div>
        <div class="box box2"></div>
      </div>
      <div class="column">
        <div class="box box3"></div>
      </div>
      <div class="column">
        <div class="box box4"></div>
        <div class="box box5"></div>
      </div>
    </div>

    .wrap {
        width: 20px;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
    }

    .column {
        flex-basis: 100%;
        display:flex;
        align-items: center;
        justify-content: space-around;
    }

    .box {
        width: 6px;
        height: 6px;
        background-color: #666;
        border-radius: 3px;
    }

4. 最后实现一个“9饼”的效果

flex-demo4.png

• 第一步设置一个容器display: flex
• 第二步设置换行flex-wrap: wrap
• 第三步设置主轴居中对齐justify-content: center
• 第四步设置交叉轴居中对齐align-items: center
  上代码

    <div class="wrap">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
      <div class="box box5"></div>
      <div class="box box6"></div>
      <div class="box box7"></div>
      <div class="box box8"></div>
      <div class="box box9"></div>
    </div>

    .wrap {
        width: 20px;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .box {
        width: 6px;
        height: 6px;
        background-color: #666;
        border-radius: 3px;
    }

例子写到这里，大家发现基本上容器的属性已经全部被利用了，总结起来就是主轴设置用justify-content，交叉轴用align-items，多根轴线用align-content，切换主轴用flex-direction，想要换行用flex-wrap，最后简写用align-content；项目的属性也有用到align-self调整自身的对齐，和flex-basis分配剩余的空间之前项目大小设置

附加“三圣杯”效果实现

demo.png

分析：

• 首先容器分为上中下三个项目，纵向排列
• 然后中间的内容左右定宽，中间占满

代码：

<div class="wrap">
  <header></header>
  <div class="main">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>
  <footer></footer>
</div>

.wrap {
  height: 300px;
  display: flex;
  flex-direction: column;
}

header, footer {
  flex: 1;
  background-color: #aed507;
}

.main {
  display: flex;
  flex: 1;
}

.left, .right {
  flex: 0 0 50px;
  background-color: #c369fa;
}

.content {
  flex: 1;
}