flex 布局详解

关于flex具体是什么在此不赘述，官方文档在此：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

我自己通过实例总结如下：

flex 布局主要有两大块：1. 父元素；2. 子元素

把这两大块搞明白就算吃透flex布局了（接下来的实例中，我会将完整代码贴出来，大家可复制代码在浏览器运行感受一下）。

父元素

1. justify-content

元素水平方向上的布局 常用的也就5个属性而已，代码：

效果如下：

justify-content

注意

• space-between: 先是两端对齐，剩余的子元素之间间隔相同
• space-around: 每个元素左右距离相同（为了方便理解，可想象成每个元素都是margin: 0 20px; 这种效果，所以两侧的剩余宽度是项目间隔宽度的二分之一）。

2. align-items

元素垂直方向上的布局，常用的就5个属性，代码

    
    
    


    
    

        
1
2
3
    

    
    

        
1
2
3
    

    
    

        
1
2
3
    

    
    

        
1
2
3
    

    
    

        
1
2
    

效果：

align-items

注意

• baseline: 使整行文字的基准线平齐，在此基础上布局子元素
• stretch: 元素没有设置具体高度值，或者高度属性值为auto时，才会生效

3. align-content

要解释这个属性，先带大家理解一下flex布局容器中“轴”的概念：

flex布局的容器中默认有两根轴：1. 水平方向的主轴；2：垂直方向的轴。
容器内的元素默认按照主轴的方向进行布局，当元素不止一行的时候，水平方向就会存在多根轴；
或者当元素按照垂直方向布局，当元素不止一列时，垂直方向就会存在多根轴。

align-content就是对这多根轴进行布局。具体看代码

    
    
    


    
    

        
1
2
3
4
5
6
7
8
9
10
    

    
    

        
1
2
3
4
5
6
7
8
9
10
    

    
    

        
1
2
3
4
5
6
7
8
9
10
    

    
    

        
1
2
3
4
5
6
7
8
9
10
    

    
    

        
1
2
3
4
5
6
7
8
9
10
    

效果：

align-content

4. flex-wrap

子元素是否可以换行展示，常用的只有三个属性，代码：

    
    
    


    
    

        
1
2
3
4
5
6
7
8
9
10
    

    
    

        
1
2
3
4
5
6
7
8
9
10
    

    
    

        
1
2
3
4
5
6
7
8
9
10
    

效果：

flex-wrap

注意
当没有设置flex-wrap属性时，默认是不换行的，所有子元素会挤在一排。
属性值为wrap-reverse时，是把行倒序排列，但每一行里面的元素还是原来的顺序，这样想就容易理解了。

5. flex-direction

元素排列方向，常用的四个属性，代码：

    
    
    


    
    

        
1
2
3
4
    

    
    

        
1
2
3
4
    

    
    

        
1
2
3
4
    

    
    

        
1
2
3
4
    

效果：

flex-direction

注意
不仅要注意元素排列顺序，还要注意相对父元素的排列方向！！！

6. flex-flow

flex-direction 和 flex-wrap 的简写，应该很好理解吧，在此不赘述，请查看官网文档。

子元素

1. order

设置当前子元素的排序位置，数字越小越往前，默认为0，可以是负数。
代码：

    
    
    


    
    

        
1
2
3
4
5
    

    
    

        
1
        
2
        
3
        
4
        
5
    

效果：

order

2. flex-grow

设置项目占剩余空间的份额(如果有剩余空间的话)，如果为0，则不拉伸，负数无效。
代码:

    
    
    


    
    

        
1
2
3
4
5
    

    
    

        
flex-grow: 0
        
flex-grow: -1
        
3
        
flex-grow: 2
        
flex-grow: 3
    

效果：

flex-grow

3. flex-shrink

当空间不够时，设置子元素的缩小比例。若属性值为0，则不缩小。
代码：

    
    
    


    
    

        
未设置flex-shrink
未设置flex-shrink
未设置flex-shrink
未设置flex-shrink
未设置flex-shrink
    

    
    

        
flex-shrink: 0
        
flex-shrink: 1
        
flex-shrink: 2
        
flex-shrink: 3
        
flex-shrink: 4
    

效果：

flex-shrink

关于flex-shrink计算规则：

• 在上例中，五个子元素，每个宽度是500px，所以总宽度是500*5=2500px
• 父元素宽度1660px，所以需要子元素们缩小2500-1660=840px
• 五个子元素flex-shrink属性值分别为0、1、2、3、4，所以总共缩小的份数是0+1+2+3+4=10，每一份的宽度是 840 ÷ 10 = 84px;
• 第一个子元素flex-shrink: 0，所占份额是0，所以不进行缩小，最终宽度是500px
• 第二个子元素flex-shrink: 1，所占份额是1，所以缩小1份，最终宽度是500-84*1=416px
• 第三个子元素flex-shrink: 2，所占份额是2，所以缩小2份，最终宽度是500-84*2=332px
• 第四个子元素flex-shrink: 3，所占份额是3，所以缩小3份，最终宽度是500-84*3=248px
• 第五个子元素flex-shrink: 4，所占份额是4，所以缩小4份，最终宽度是500-84*4=164px

注意： 如果元素设置margin、padding、border，需要把这些也算进宽度里

4. flex-basis

定义子元素在主轴方向上的初始大小。

当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

翻译成人话就是说：flex-basis 比 width或height 优先级高！
代码：

    
    
    


    

        
width:500px;
        
width:500px; flex-basis: 300px;
    

效果：

flex-basis

5. flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6. align-self

设置当前子元素相对父元素的对齐方式，可覆盖父元素的align-items属性。属性值和align-items的属性值一样。
代码：

    
    
    


    

        

        

        

        
align-self: flex-end;
        

    

效果：

align-self