CSS-flex布局（一）

容器设置

display:flex/inline-flex
display: -webkit-flex; /* Safari */ webkit内核浏览器

flex布局分为主轴（main axis）和交叉轴（cross axis）
flex布局元素为flex容器（flex container），子元素为flex项目（flex item）

设置flex后，子元素的float、clear、vertical-align失效
float:设置元素的浮动方向
clear:设置不允许出现浮动元素的一侧
vertical-align:作用于 内联元素 或 display：table-cell 的元素（float和position：absolute会使元素变为块级元素，也会导致此属性失效）

代码片

使用代码

// css
.box{
   
    display: flex;
    width: 500px;
    height: 500px;
    border: solid 1px black;
}
.item1{
   
    width: 200px;
    height: 100px;
    background-color: lightblue;
}
.item2{
   
    width: 100px;
    height: 200px;
    background-color: lightcoral;
}
.item3{
   
    width: 100px;
    height: 50px;
    background-color: yellow;
}
.item4{
   
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}
.item5{
   
    width: 100px;
    height: 150px;
    background-color: lightgray;
}
}

// html
<div <