CSS flex使用详解

实现布局最早就是用浮动，但是浮动最初的目的是用来做图片文字环绕的。只是正好可以用来做布局，而且用浮动的时候存在高度坍塌问题，虽然可以用cleanfix来修复这个问题。但理想的状态是最好有一种功能是专门来处理这个事情的，而不是开发者缝缝补补。浮动是CSS一种非常老且不好用的功能。Flex是专门用来解决布局问题的。Flex布局是非常好用的，只是ie需要10才支持。不过目前ie10已经不维护了。其它浏览器都是支持的，包括移动端的浏览器。flex在移动端是非常流行的，在pc端也越来越流行。

关于flex的定义和教程，火狐官方的文档是最详细的，w3c的好像连模型图都没有。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flex的两个重要元素 flex-container和flex-item

这两个概念要了解一下，并没有相关代码，只是个概念。方便描述Flex。
例如下面的商品是包裹在一个大的div里面的，只要给这个div设置为flex属性，那么这个div就叫做 flex-container，而里面的这些小的div(或者子元素)就是flex-item。非常好理解。

开启flex和flex的优点

开启flex也非常的简单。
使用display:flex就可以开启flex功能，flex是一个块元素。还可以设置为inline-flex，就变成可以改变大小的行内元素。

        #box {
            display: flex;
            /*display: inline-flex;*/
        }
1
2
3
4

我们写三个div，默认情况下就是下面的样子。（字体做了居中）。现在我想让三个div水平排列怎么做呢？可以给三个div都设置float属性。如果用flex来实现。直接给父div设置为flex就可以实现了。

    <style rel="stylesheet">
        #box {
        }

        .div1{
            width: 200px;
            height: 200px;
            background-color: lightblue;

        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }

        .fontCenter{
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }

    </style>
<div id="box">
     <div class="div1 fontCenter">1</div>
     <div class="div2 fontCenter">2</div>
     <div class="div3 fontCenter">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

使用flex一行代码就实现了水平排列的功能。

     #box {
             display: flex;
            /*display: inline-block;*/
        }
1
2
3
4

但如果我想让三个布局右对齐要怎么做呢？float的做法就是把三个div看成一个整体，然后让整体右浮动。而使用flex就非常的简单，在flex-container多添加下面一行就可以实现了。具体细节下面再解释。

        #box {
             display: flex;
             justify-content: end;
        }
1
2
3
4

可以看到flex是非常高效简洁的。

flex的定位系统

在flex里面并没有x,y轴。而是叫主轴和交叉轴。概念是完全不一样的，并不是换个名字而已。在我们设置了下面的代码后，flex的定位系统大概处于下图的样子。主轴的方向是从左到右。最左边是main-start,右边是main-end。这非常好理解。

 display: flex;
 //默认值就是row，可以不写
 //flex-direction: row;
1
2
3

下图是一个主轴的一个示意图，我们看到主轴在水平方向是有两个方向的，并且后面还跟了一个属性flex-direction:row表示方向是从右往左的，如果设置为flex-direction:row-reverse就是从左往右的。当然main-start和main-end也会跟着改变。

不光如此，主轴还能在垂直方向上(flex-direction:column),也有两个方向。flex-direction:column表示从上到下，flex-direction:column表示从下到上。当然main-start和main-end也会跟着改变。也就是主轴可以有四个方向，当然同时只能设定一个方向。

还有一个轴是垂直于主轴的，我们叫他交叉轴。在默认的情况下(只是开启flex,没有任何额外操作)，整个定位系统就如下图所示。
其实默认的情况就是x，y轴的形式。

对应的布局情况有下面是四种。

可以通过justify-content属性调整子元素的对齐方式。非常的方便。

对于居中的情况，还默认提供了三种效果，都是非常实用的。

具体细节在下面的案例中举例说明。

具体案例和常见布局实现

情况一：水平布局（靠左）
前面已经讲过，只要开启flex就可以实现了。

情况二：水平靠右
设置justify-content为flex-end就行。

  display: flex;
  justify-content: flex-end;
1
2

情况三：水平居中
正常居中：

            display: flex;
            justify-content: center;
1
2

居中效果：
justify-content还可以设置三种不同的居中效果，效果如下图，可以自己试下。

flex-wrap

我们有9个正方形的div。在设置了flex后水平排列，因为宽度超过屏幕宽度。九个div宽度都被压缩，这是flex的默认处理办法。

当然最好是能够换行显示，flex-wrap就可以实现这样的功能。

 flex-wrap: wrap;
1

还有一个值是wrap-reverse，不过一般用不上。

flex-wrap: wrap-reverse;
1

flex-flow

这个属性就是可以同时设置flex-dirction和flex-wrap，没什么意思，觉得非常的鸡肋。

           display: flex;
           flex-flow: row-reverse wrap;
1
2

align-items属性

这个属性是专门用来处理交叉轴的item的对齐方式。我们默认交叉轴方向是从上到下(别的方向是类似的，只是相反而已)。
总共就下面这5个值。
flex-start:顶部对齐
flex-start:底部对齐
center:中间对齐
baseline：基线对齐，基线是文字的一个概念，相当于文字底部。如果有多行文字，以第一行对齐
stretch:如果你没有设置item的height（只要有一个）,那么所有的item都会填充满高度。

自己设置试试就知道了。

在多行的情况下，item之间会有间隙，这个间隙大高度是多余高度等分获得的。

        #box {
             display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            height: 500px;
            background-color: plum;
        }
1
2
3
4
5
6
7

align-content属性

align-content是专门用来处理多行的，单行就没必要用这个，用align-items就行。
和 align-items是类似的，align-items是单独影响每个item的，而align-content是把这些item当成一个整体来影响。

和align-item的区别是在多行情况下，item高度是是没有间隙大，原来什么样子就是什么样子，只是整体做一个对齐。

同样也支持三种居中对齐方式。

到此。flex-container的所有属性都讲完了。

flex-item的属性

前面都是flex-container的属性，现在开始讲flex-item的属性

order属性

order的值默认是0，值越小排在越前面。

        .div1{
            width: 200px;
            height: 200px;
            order: 3;
            background-color: lightblue;

        }
        .div2{
            width: 200px;
            height: 200px;
            order: 1;
            background-color: lightgreen;
        }
        .div3{
            width: 200px;
            height: 200px;
            order: 2;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

align-self

有一个元素想搞特殊，就可以用这个属性给元素单独设置。

        .div1{
            width: 200px;
            height: 200px;
            order: 3;
            background-color: lightblue;

        }
        .div2{
            width: 200px;
            height: 200px;
            order: 1;
            background-color: lightgreen;
        }
        .div3{
            width: 200px;
            height: 200px;
            order: 2;
            align-self: flex-end;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

flex-grow

这个属性就是用来填充空白区域的。比如下面的三个div。

都设置上flex-grow属性。就会变成下面的样子。

        .div1{
            width: 200px;
            height: 200px;
            flex-grow: 1;
            background-color: lightblue;

        }
        .div2{
            width: 200px;
            height: 200px;
            flex-grow: 2;
            background-color: lightgreen;
        }
        .div3{
            width: 200px;
            height: 200px;
            flex-grow: 1;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

比如种长是1000px,三个div宽度都是100px,那么
div1增加的长度=(1000-1003)/41
div2增加的长度=(1000-1003)/42
div3增加的长度=(1000-1003)/41

如果flex-grow的所有item的总和小于1，那么直接拿flex-grow的值乘以多余的长度就可以了。

        .div1{
            width: 200px;
            height: 200px;
            flex-grow: .1;
            background-color: lightblue;

        }
        .div2{
            width: 200px;
            height: 200px;
            flex-grow: .6;
            background-color: lightgreen;
        }
        .div3{
            width: 200px;
            height: 200px;
            flex-grow: .3;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

会空一块出来。
div1增加的长度=(1000-100)*0.1
div2增加的长度=(1000-100)*0.6
div3增加的长度=(1000-100)*0.2

如果三个值加起来超过1，那么算法其实和整数是一样的。都是按比例增长，两种是没什么区别的。

        .div1{
            width: 200px;
            height: 200px;
            flex-grow: .1;
            background-color: lightblue;

        }
        .div2{
            width: 200px;
            height: 200px;
            flex-grow: .6;
            background-color: lightgreen;
        }
        .div3{
            width: 200px;
            height: 200px;
            flex-grow: .5;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

flex-shrick

和flex-grow相反， flex-shrick用于当空间不够的时候，对item进行缩小。例如下面的代码，
div1减少的长度=(900-700)/51=40
div2减少的长度=(900-700)/53=120
div3减少的长度=(900-700)/5*1=40

        #box {
             display: flex;
            /*display: inline-block;*/

            height: 500px;
            width: 700px;
            /*align-items: flex-end;*/

            background-color: plum;
        }

        .div1{
            width: 300px;
            height: 200px;
            flex-shrink: 1;
            background-color: lightblue;

        }
        .div2{
            width: 300px;
            height: 200px;
            flex-shrink: 3;
            background-color: lightgreen;
        }
        .div3{
            width: 300px;
            height: 200px;
            flex-shrink: 1;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

如果flex-shrike的总和小于1，那么直接按比例相乘，不过很少用到。

        .div1{
            width: 300px;
            height: 200px;
            flex-shrink: .1;
            background-color: lightblue;

        }
        .div2{
            width: 300px;
            height: 200px;
            flex-shrink: .6;
            background-color: lightgreen;
        }
        .div3{
            width: 300px;
            height: 200px;
            flex-shrink: .2;
            background-color: lightsalmon;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div1减少的长度=(900-700)*0.1=20
div2减少的长度=(900-700)*0.6=120
div3减少的长度=(900-700)*0.2=40
所以200-180=20，也就是会超出20px的空间，如下图所示。

flex-basis

约等于width,但是有区别，感觉没有什么实战意义。

flex

flex就是flex-shricks,flex-grow,flex-basis的和写。
没什么意思。

flex: 1,1,100px
1

https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/