display:flex弹性布局讲解

弹性布局

Web页面布局的一种方式，使用方便，效果完美，可以简便、完整、响应式地实现各种页面布局。主流浏览器都早已支持。

.box {
   
    width: 400px;
    height: 80px;
    background: aquamarine;
}
.box-item {
   
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: rgb(0, 0, 0);
}
.item-1 {
   
    background-color: rgb(165, 230, 60);
}
.item-2 {
   
    background-color: rgb(168, 52, 189);
}
.item-3 {
   
    background-color: rgb(80, 62, 236);
}
.item-4 {
   
    background-color: rgb(240, 66, 66);
}
.item-5 {
   
    background-color: rgb(87, 202, 52);
}