1. flex 是什么？

flex 是 Flexible Box 的缩写，就是弹性盒子布局.

2. 为什么我们需要 flex?

解决元素居中问题自动弹性伸缩以及适配不同大小的屏幕和移动端

3、如何设置flex布局

与grid类似，flex也分为块级元素和行内元素两种，分别为display:flex（块级元素）与display:inline-flex（行内元素）。

我们先来举个例子看看flex有何作用，首先，我们先来看未设置flex布局时的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 500px;
        width: 1000px;


    }
    .container div{
        width: 500px;

    }
     .item1{
      background-color: pink;
     
   }
   .item-2{
       background-color: purple;
    
   }
   .item-3{
       background-color: red;
   }
   .item-4{
       background-color: rosybrown;
    
   }
   .item-5{
       background-color: salmon;
    
   }
   .item-6{
       background-color: slateblue;
   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

效果如图：

当设置flex后为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        border: 10px solid black;
        height: 500px;
        width: 1000px;
        display: flex;



        align-content: stretch; 
    }
    .container div{
        width: 500px;

    }
     .item1{
      background-color: pink;

     
   }
   .item-2{
       background-color: purple;
    
   }
   .item-3{
       background-color: red;
   }
   .item-4{
       background-color: rosybrown;
    
   }
   .item-5{
       background-color: salmon;
    
   }
   .item-6{
       background-color: slateblue;
   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

在设置了flex布局6个div沿着主轴方向排列（沿着主轴方向排列一般为flex的默认方式）

4、容器属性

4.1排列方向：flex-direction

row	横向从左到右排列（左对齐）。
row-reverse	对齐方式与row相反。
column	纵向从上往下排列（顶对齐）。
column-reverse	对齐方式与column相反。

接下来我们一一举例来说明这几种属性：

4.1.1、row

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        border: 10px solid black;
        height: 500px;
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .container div{
       width: 500px;
    }
     .item1{
      background-color: pink;
      /* 允许项目进行收缩 */
     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;
   }
   .item-4{
       background-color: rosybrown;
    
   }
   .item-5{
       background-color: salmon;
    
   }
   .item-6{
       background-color: slateblue;
   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

在主轴是row时就是默认方向和不设置时几乎一致。

4.1.2、row-reverse

.container{
        border: 10px solid black;
        height: 500px;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
    }

当把主轴设为row-reverse时，可以看到排列的方向是和row默认值相反的。

4.1.3、column


    .container{
        border: 10px solid black;
        height: 500px;
        width: 1000px;
        display: flex;
        flex-direction: column;
    }

在将主轴设为column后，主轴的排序顺序从左右排列的方式变为了上下。

4.1.4、column-reverse

.container{
        border: 10px solid black;
        height: 500px;
        width: 1000px;
        display: flex;
        flex-direction: column-reverse;
    }

将主轴设为column-reverse后，和row-reverse与row一样，它也变成了和column相反的排列方向。

4.2、换行属性：flex-wrap

nowrap	flex容器为单行。（默认值）
wrap	flex容器为多行。该情况下flex子项溢出的部分会自动换行
wrap-reverse	反转 wrap 排列

接下来我们一一举例来说明这几种属性：

4.2.1、nowrap

首先，我们继续输入6个div，使它们的总宽大于容器宽度，来看它在nowrap也就是默认情况下，是什么样子的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 500px;
        width: 1000px;
        display: flex;
        flex-wrap: nowrap;
    }

    .container div{
       width: 800px;
       height: 500px;
    }
     .item1{
      background-color: pink;
     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;
   }
   .item-4{
       background-color: rosybrown;
    
   }
   .item-5{
       background-color: salmon;
    
   }
   .item-6{
       background-color: slateblue;
   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

可以看到整个容器的大小其实没有变化，但她它自动的压缩了每个div的宽度，使得每个div都可以在容器里，而不会溢出。

4.2.2、wrap

当我们设置rap进行换行时，来看看会是什么样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 600px;
        width: 500px;
        display: flex;
        flex-wrap: wrap;
    }

    .container div{
       width: 100px;
       height: 300px;
    }
     .item1{
      background-color: pink;
     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;
   }
   .item-4{
       background-color: rosybrown;
    
   }
   .item-5{
       background-color: salmon;
    
   }
   .item-6{
       background-color: slateblue;
   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

当设置为warp时，如果div的宽度大于容器时，会将多余的部分换行放下。

4.2.3、wrap-reverse

当设置为wrap-reverse后，将会变成反方向换行：

.container{
        border: 10px solid black;
        height: 600px;
        width: 500px;
        display: flex;
        flex-wrap: wrap-reverse;
    }

4.3、项目在容器中的主轴对其方式：justify-content

flex-start	弹性盒子元素将向行起始位置对齐。
flex-end	弹性盒子元素将向行结束位置对齐。
center	弹性盒子元素将向行中间位置对齐。
space-between	弹性盒子元素会平均地分布在行里。
space-around	弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
space-evenly	均匀排列每个元素每个元素之间的间隔相等

4.3.1、flex-start

flex-start为默认属性，所以在此就不过多的举例说明了。

4.3.2、flex-end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 600px;
        width: 800px;
        display: flex;
        justify-content: flex-end;
    }

    .container div{
       width: 100px;
       height: 300px;
    }
     .item1{
      background-color: pink;
     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;
   }
   .item-4{
       background-color: rosybrown;
    
   }
   .item-5{
       background-color: salmon;
    
   }
   .item-6{
       background-color: slateblue;
   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

4.3.3、center

.container{
        border: 10px solid black;
        height: 600px;
        width: 800px;
        display: flex;
        justify-content: center;
    }

4.3.4、space-between

.container{
        border: 10px solid black;
        height: 600px;
        width: 800px;
        display: flex;
        justify-content: space-between;
    }

4.3.5、space-around

.container{
        border: 10px solid black;
        height: 600px;
        width: 800px;
        display: flex;
        justify-content: space-around;
    }

4.3.6、space-evenly

 .container{
        border: 10px solid black;
        height: 600px;
        width: 800px;
        display: flex;
        justify-content: space-evenly;
    }

4.4、项目在容器中的交叉轴对齐方式：align-content与align-items (只适用单行项目)

flex-start	弹性盒子元素将向行起始位置对齐。
flex-end	弹性盒子元素将向行结束位置对齐。
center	弹性盒子元素将向行中间位置对齐。
space-between	弹性盒子元素会平均地分布在行里。
space-around	弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
space-evenly	均匀排列每个元素每个元素之间的间隔相等

两者之间的区别：align-content使用多行或是单行进行对齐，而align-items 只适用单行项目。
交叉轴对齐方式效果与在justify-content上的排列方式差不多。我们继续举几个例子说明：

4.4.1align-content：flexend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 600px;
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;
    

    }

    .container div{
       width: 400px;
    }
     .item1{
      background-color: pink;

     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;

   }
   .item-4{
       background-color: rosybrown;

   }
   .item-5{
       background-color: salmon;

   }
   .item-6{
       background-color: slateblue;

   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

在使用了align-content：flexend之后，6个div的排序方向全为了下方，和justify-content：flexend一样，只不过变为交叉轴在移动，主轴无任何变化。其他的对齐方式以及align-items与justify-content都几乎一致，只不过变为了交叉轴对齐方式，所以就不过多举例。

5、项目属性

5.1、flex-shrink

5.1.1、flex-shrink的作用

设而置或检索弹性盒的收缩比率。根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

5.1.2、如何设置

我们继续举个例子来看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 600px;
        width: 1200px;
        display: flex;
    

    }

    .container div{
       width: 400px;
       height: 200px;
    }
     .item1{
      background-color: pink;
      flex-shrink: 0;

     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;

   }
   .item-4{
       background-color: rosybrown;

   }
   .item-5{
       background-color: salmon;

   }
   .item-6{
       background-color: slateblue;

   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

可以看到我在第一个div处设置了flex-shrink后，第一个div并没有出现被压缩的情况出现，就是原本设置的400px，这就是flex-shrink的作用。当然也需要注意，flex-shrink属性的值只有0或1，0代表禁止压缩，1代表可以被压缩也就是默认值。

5.2、align-self：

5.2.1align-self的值

auto	值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start	放置在容器顶部
flex-end	放置在容器底部
center	居中放置
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。
stretch	与容器的基线对齐

接下来我们来一一举例说明：

5.2.2、align-self：auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 600px;
        width: 1200px;
        display: flex;
    

    }

    .container div{
       width: 400px;
    }
     .item1{
      background-color: pink;

     
   }
   .item-2{
       background-color: purple;
       align-self: auto;
   }
    
   .item-3{
       background-color: red;

   }
   .item-4{
       background-color: rosybrown;

   }
   .item-5{
       background-color: salmon;

   }
   .item-6{
       background-color: slateblue;

   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

5.2.2、align-self：flex-start

.item-2{
       background-color: purple;
       align-self: flex-start;
   }

5.2.3、align-self：flex-end

.item-2{
       background-color: purple;
       align-self: flex-end;
   }

5.2.4、align-self：center

.item-2{
       background-color: purple;
       align-self: center;
   }

5.2.5、allign-self：baseline

.item-2{
       background-color: purple;
       align-self: baseline;
   }

5.2.6、allign-self：stretch

.item-2{
       background-color: purple;
       align-self: baseline;
   }

5.3、order

5.3.1如何使用order

我们先使用默认布局来看默认状态下的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<STyle>
    .container{
        border: 10px solid black;
        height: 600px;
        width: 1200px;
        display: flex;
    

    }

    .container div{
       width: 400px;
       height: 200px;
    }
     .item1{
      background-color: pink;

     
   }
   .item-2{
       background-color: purple;

    
   }
   .item-3{
       background-color: red;

   }
   .item-4{
       background-color: rosybrown;

   }
   .item-5{
       background-color: salmon;

   }
   .item-6{
       background-color: slateblue;

   }
</STyle>
<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
    </div>
</body>
</html>

接下来我们来看看设置了order后的布局：

 .item1{
      background-color: pink;
      order: 3;

     
   }
   .item-2{
       background-color: purple;
       order: 2;
   }
    
   .item-3{
       background-color: red;
       order: 1;