如何使用 CSS 设置 Flex 项目之间的空间
主题:HTML / CSS
答案:使用 CSS justify-content 属性
您可以简单地使用带有 space-between 值的 CSS justify-content
让我们试试这个例子来了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>设置 Flexbox 项目之间的距离</title>
<style>
.flex-container {
height: 300px;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
.item {
width: 20%;
background: #b4bac0;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>在上面的示例中，弹性项目之间的空间可能会根据弹性容器的宽度而有所不同。 然而，如果你想在 flexbox 项目之间设置一个固定的空间（例如 10px、20px 等），你可以简单地使用 CSS paddingmargin
在下面的示例中，flexbox 项目将在它们周围有一个固定的边距。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在 Flex 项目之间设置固定空间</title>
<style>
.flex-container {
height: 300px;
display: flex;
border: 1px solid black;
padding: 10px;
}
.item {
flex: auto;
background: #b4bac0;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
