Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）

align-items

让子盒子沿侧轴来对齐

侧轴居中对齐：align-items: center;

拉伸，子盒子不要给高度：align-items: stretch;

div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-direction: column;
            /* 默认主轴为x轴 */
            justify-content: center;
            /* 我们需要一个侧轴也居中对齐 */
            align-items: center;
            /* 拉伸，子盒子不要给高度 */
            /* align-items: stretch; */
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }

align-content

有换行的情况下，让子盒子关于侧轴对齐

使行间盒子挨着：align-content: flex-start;

所有盒子居中对齐：align-content: center;

一个贴着上沿一个贴着下沿：align-content: space-between;

上下相同间距，中间对齐：align-content: space-around;

    
    
    
    
    


    

        1
        2
        3
        4
        5
        6
    

flex-flow

把设置主轴方向和是否换行（换列）简写

flex-flow: column wrap

    
    
    
    
    


    

        1
        2
        3
        4
        5
        6
    

flex

将剩余的空间分配成份数

p span{

            flex: 1;

        }

        p span:nth-child(2)

        {

            flex: 2;

            background-color: purple;

        }

span有三个，两个占一份，中间的占两份

    
    
    
    
    


    

        

        

        

    

    

        123
    

 align-self，order

 align-self：可以改变单个元素侧轴的摆放

order:调换两人子元素的位置，数值越小越前 默认为0

    
    
    
    
    


    

        1
        2
        3