Flex布局简述
flex布局可以更加方便的适配移动端,做到快速灵活弹性化的自适应。
实现方式
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
html,body{
margin: 0;
padding: 0;
}
.container{
/* flex布局设置 */
display: flex;
flex-direction: row;
/* align-content会自动填满整个行 */
/* align-content: center; */
align-items: center;
justify-content: center;
/* justify-items: center; */
/* 宽高设置 */
width: 100%;
height: 100vh;
/* 底色设置 */
background-color: #fafafa;
}
/* item通用样式 */
.item{
padding: 30px;
color: #2a2a2a;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
/* 每一个item的背景色 */
.item1{
background-color: #DA4F49;
}
.item2{
background-color: #FAA732;
}
.item3{
background-color: #0088CC;
}
效果图
垂直水平居中
