父元素使用flex布局后子元素自动拥有行内块元素特性
下面span元素拥有行内块元素的特性,不独占一行且可以设置宽高
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=\, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
display: flex;
}
span {
width: 100px;
height: 100px;
background-color: aquamarine;
display: inline;
line-height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<span>aaasdasdasdsad</span>
<span>aaasdasdasdsad</span>
<i>asdadsa</i>
</div>
</body>
</html>
网格间距
网格间距是网格内容之间的间距,可以通过 [column-gap]或 [gap]属性在[网格布局]中创建