一、flex布局体验
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: black;
margin-right: 5px;
flex: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
二、flex布局原理
三、flex布局父项常见属性
flex-direction : 默认是row(行),可以设置column(列)
四、flex布局子项常见属性