Flex布局（2）-原创手记-慕课网

双项目时的布局情况

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{            width: 200px;            height: 200px;            border: 3px solid red;
        }        .item{            width: 50px;            height: 50px;            border: 3px solid green;
        }    </style></head><body>
    <div class="box">
        <div class="item">item1</div>
        <div class="item">item2</div>
    </div></body></html>

webp

原始图.png

flex布局后

.box{    width: 200px;    height: 200px;    border: 3px solid red;    display: flex;
}

webp

flex布局后.png

此时的布局方式和加上justify-content:flex-start效果相同
space-space-between 两端对齐布局

.box{    display: flex;    justify-content: space-between;
}

webp

两端对齐.png

space-around 环绕对齐

.box{    display: flex;    justify-content: space-around;
}

webp

环绕对齐.png

justify-content结合align-items 可以变换出更多造型
左右环绕对齐，上下居中对齐

.box{    display: flex;    justify-content: space-around;    align-items: center;
}

webp

结合对齐.png

当items项目们没有设置高度或者高度为auto时，stretch表示纵向铺满全屏

.box{
    display: flex;
    justify-content: space-around;    // items没设置高度时 ，伸展
    align-items: stretch;
}

webp

注意：items没设置高度时.png

如果两个项目想纵向排列，用flex-direction:column

.box{    display: flex;    flex-direction:column;    justify-content: space-around;    align-items: center;
}

webp

纵向排列.png

具体效果和横纵向颠倒是一样的
项目太多时的换行情况，默认不换行

webp

默认不换行.png

换行时，自动计算

.box{    display: flex;    flex-wrap: wrap;
}

webp

换行.png

换行并几行之间逆转

.box{    display: flex;    flex-wrap: wrap-reverse;
}

webp

逆转换行.png

flex-flow使用

.box{
    display: flex;    // flex-flow是flex-direction和flex-wrap的结合
    flex-flow:column wrap;
}

webp

flex-flow.png

作者：椰果粒
链接：https://www.jianshu.com/p/d21e804328b3