css3 flex盒子布局

时间:2022-01-31 16:29:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
display: -webkit-flex;
background-color: lightgreen;
height: 100px;
}
.item{
color: #FFF;
flex: 1;
}
.first{
width: 100px;
background: red;
} /*水平垂直居中 css*/
.myoff{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: royalblue;
width: 300px;
height: 300px;
}
/*水平垂直居中 flex版本*/
.parent{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="nav" style="flex-direction: row-reverse;">
<div class="first">哈哈</div>
<div class="item">adsfasdf</div>
<div class="item" style="flex: 2;">大厦法定是adsfasdf</div>
<div class="first">呵呵</div>
</div>
<!--<div class="myoff">asdf</div>-->
<div class="parent">
<div style="width: 100px;height: 100px; background: red;">aaaaaaaaaaaa</div>
</div>
</body>
</html>