css弹性布局的三种格式

html页代码

<div class="wrap">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

css页

.wrap{
    width: 500px;
    height: 200px;
    background-color: pink;
    display: flex;
    /* flex-wrap: wrap; // 可以让box换行 */
    justify-content: space-around;
}
.box{
    width: 20%;
    height: 200px;
    background-color: yellow;
}

弹性布局有三种样式，由justify-content属性设置，
1.属性值为：space-around 时：
运行图：

2.属性值为：space-between 时
运行图：

3.属性值为：space-evenly 时
运行图：