flex布局，换行的元素上下设置间距
在Flex布局中，如果你想要在换行的元素之间设置间距，你可以使用gap属性（在支持的浏览器中，如Chrome、Edge等）。gap属性是row-gap和column-gap的简写形式，分别用于设置行间距和列间距。
以下是一个简单的例子，演示如何在Flex容器中设置行间距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px; /* 设置行间距和列间距为20像素 */
}
.flex-item {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<!-- ...更多的flex-item元素... -->
</div>
</body>
</html>在这个例子中，.flex-container 类定义了一个Flex容器，其中的子元素 .flex-item 会根据需要自动换行。gap 属性设置为 20px，这将在每个项目下方和右方添加20像素的间距，从而在换行时生效。
评论已关闭