如何使用 CSS 设置 Flex 项目之间的空间
主题：HTML / CSS上一页|下一页
答案：使用 CSS justify-content 属性
您可以简单地使用带有 space-between 值的 CSS justify-content 属性来设置 flexbox 项之间的空间。 在下面的示例中，弹性容器有 4 个项目，其中每个弹性项目的宽度为 20%，其余 20% 的空间在弹性项目之间均匀分布。
让我们试试这个例子来了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Distance Between Flexbox Items</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 padding 和 margin 属性。
在下面的示例中，flexbox 项目将在它们周围有一个固定的边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Fixed Space Between Flex Items</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 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements