Question

我正在尝试在每个.box元素之间留有间隔，但是，间隔之间的作用不是在两个间隔之间创建空间。这些框之间没有空格。

		* {
			box-sizing: border-box;
		}

		.grid {
			border: black dashed 1px;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			align-items: center;
		}

		.grid * {
			border: 1px red solid;
		}

		.box {
			height: 100px;
			width: 100px;
			background-color: blue;
		}

<div class="grid">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
</div>

请参阅代码和框：https://codesandbox.io/s/8j7k4xjzl

Answer 1

该代码实际上正在工作。问题是“ .grid” div根据其内容采用了所需的最小高度。

如果将“ .grid” div高度设置为等于100vh，则可以看到结果。

height: 100vh;

以下是显示结果的小提琴： https://jsfiddle.net/ayushgupta15/w30h5kep/

请告诉您这是否是您正在寻找的解决方案。

Answer 2

Space-between用于水平“框间距”。您要寻找的是保证金。

.box {
    height: 100px;
    width: 100px;
    background-color: blue;
    margin: 5px;
}

像这样

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>

	<style>
		* {
			box-sizing: border-box;
		}

		.grid {
			border: black dashed 1px;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			align-items: center;
		}

		.grid * {

		}

		.box {
			height: 100px;
			width: 100px;
			background-color: blue;
      margin: 5px;
		}
	</style>

	<div class="grid">
		<div class="box">1
		</div>
		<div class="box">2</div>
		<div class="box">3</div>


	</div>

</body>

</html>

如果需要，您可以编辑上，右，左，下边距：

margin: (top) (right) (bottom) (left);

Flexbox：间隔不会在项目之间生成空间

2 个答案: