弹性布局 display:flex;
居中等分 justify-content:center;
布局方向(方向 direction;行 row;列 column) flex-direction:column;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>flex 弹性布局</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- 弹性布局 display:flex;
居中等分 justify-content:center;
布局方向(方向 direction;行 row;列 column) flex-direction:column;
-->
<style>
.box {
/*弹性布局 flex*/
display: flex;
/*居中等分*/
/*justify-content: center;*/
/*justify-content: space-around;*/
}
.box span {
flex: 1;
height: 100px;
/*background-color: aqua;*/
margin: 5px;
/*width: 300px;*/
}
.ad span {
margin: 2px;
width: 300px;
/*height: 150px;*/
flex: 1;
}
.ad {
height: 500px;
/*弹性布局*/
display: flex;
/*布局方向(方向 direction) flex-direction:column;行(row) 列(column)*/
flex-direction: column;
}
</style>
</head>
<body>
<div class="box">
<span style="background-color: green">s1</span>
<span style="background-color: pink">s2</span>
<span style="flex:3;background-color: #10f574">s3</span>
<span style="background-color: deepskyblue">s4</span>
</div>
<div class="ad">
<span style="background-color: forestgreen"></span>
<span style="background-color: palevioletred"></span>
<span style="background-color: blueviolet"></span>
</div>
</body>
</html>