1. 为什么我们要用flex布局

相比于传统布局方式，flex布局可以较为简便实现一些布局样式，比如水平排列，水平等分排列等，而这些排列方式在传统布局中需要通过设置flow，display等属性，并配合margin外边距等方式才能实现，相比于传统布局，flex布局便捷快速，但对于IE11以下的浏览器不能适配。
而在手机端，由于兼容性非常好，所以在做移动端前端页面时，flex布局有着非常大的优势。

2. flex布局常用属性

2.1 设置flex容器

当我们需要设置flex布局的时候，首先需要制定一个flex容器，即设定display: flex。在这个容器下的元素会进行flex布局展示。flex布局有两个坐标轴，一条为主轴，以浏览器左上角为原点，方向向右，另一条为副轴，以浏览器左上角为原点，方向向下。
需要注意的是，在flex容器下的元素都是行内块元素，即它们也可以通过设置width和height改变大小。

<style>
  * {
    margin: 0%;
  }
  .wrap {
    display: flex;
    margin: 20px 0 0 20px;
  }
  .wrap div:nth-child(1) {
    width: 100px;
    background-color: orange;
  }
  .wrap div:nth-child(2) {
    /* flex: 1; */
    width: 100px;
    background-color: green;
  }
  .wrap div:nth-child(3) {
    width: 100px;
    background-color: blue;
  }
</style>
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

效果图.png

2.2 flex-direction属性

flex-direction属性是设置在flex容器上的，它可以更改主轴的方向，有下面几个值

下面我们来分别用代码看看它们的效果，只需修改前面代码中.wrap下的属性

.wrap {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px;
}

row-reverse效果.png

.wrap {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

column效果图.png

.wrap {
    display: flex;
    flex-direction: column-reverse;
    margin: 20px;
}

column-reverse效果图.png

2.3 justify-content属性

justify-content属性也是设置在flex容器上的，它可以设置主轴上的子元素的排列方式，有下面几种属性。

默认值为justify-content: flex-start

.wrap {
    display: flex;
    justify-content: flex-start;
    margin: 20px;
    border: 1px solid red;
}

默认flex-start效果图.png

下面我们设置justify-content: flex-end查看效果

.wrap {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
    border: 1px solid red;
}

flex-end效果图.png

center效果图.png

space-around效果图.png

space-between效果图.png

2.4 flex-wrap属性

flex-wrap属性可以设置是否元素排列不下的时候进行换行。
例如参考如下代码，每个div的宽度为100px，而容器的宽度为200px，显然是不能够直接装下的，所以在不设置flex-wrap属性的时候，5个div都会被压缩而填满一行

<style>
  * {
    margin: 0%;
  }
  .wrap {
    display: flex;
    width: 200px;
    height: 200px;
    margin: 20px;
    border: 1px solid red;
  }
  .wrap > div {
    width: 100px;
    height: 50px;
    background-color: orange;
    border: 1px solid black;
    box-sizing: border-box;
  }
</style>
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

没有换行.png

.wrap {
  display: flex;
  width: 200px;
  height: 200px;
  margin: 20px;
  flex-wrap: wrap;
  border: 1px solid red;
}

自动换行.png

2.5 align-items属性

align-items属性是设置侧轴排列的属性，一共有如下几个值

2.5.1 默认值flex-start

该效果如前一张图，侧轴是从上到下进行排列的

2.5.2 flex-end

我们通过设置align-items属性，即可使得侧轴从下往上排列

align-items: flex-end;

flex-end效果.png

2.5.3 center

通过设置align-items: center我们可以实现下图居中排列

align-items: center;

center效果.png

2.5.4 stretch

当我们在不设置每个div高度的情况下，设置align-items: stretch时，会使得div的高度拉长充满盒子的高度，如下图

stretch效果.png