flex布局常见效果

1、俩端对齐，项目之间的间距都相等

 // html
<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

// css
.container{
    width: 500px;
    background-color: bisque;
    display: flex;
    justify-content: space-between; 

}
.container div{
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

效果：

2、一侧固定宽度，另一侧随屏幕变化而变化

// html
<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

// css
.container{
    width: 500px;
    background-color: bisque;
    display: flex;
}
.box1,.box2{
    width: 100px;
    height: 100px;
    background-color: skyblue;
}
.box2{
    background-color: pink;
}
.box3{
    background-color: yellowgreen;
    flex-grow: 1;
}

效果：

3、子元素在一行排列，平分父元素宽度

// html
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

// css
.container{
    width: 500px;
    background-color: bisque;
    display: flex;
    flex-wrap: nowrap;
}
.container > div{
    width: 100px;
    height: 100px;
    margin:0 10px;
    background-color: skyblue;
}

效果：