双项目时的布局情况

html>
    
    Document
    
    
        item1
        item2

原始图.png

flex布局后

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

flex布局后.png

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

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

两端对齐.png

space-around 环绕对齐

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

环绕对齐.png

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

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

结合对齐.png

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

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

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

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

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

纵向排列.png

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

默认不换行.png

换行时，自动计算

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

换行.png

换行并几行之间逆转

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

逆转换行.png

flex-flow使用

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

flex-flow.png

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

ITPub博客

Flex布局（2）