Flexbox:间隔不会在项目之间生成空间 [英] Flexbox: space-between does not generate space between items

问题描述

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

I'm trying to have space between each .box element, however space-between is not acting to create spaces between the boxes. The boxes appear with no space in between them.

		* {
			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>

请参阅codesandbox: https://codesandbox.io/s/8j7k4xjzl

See codesandbox: https://codesandbox.io/s/8j7k4xjzl

推荐答案

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

The code is actually working. The problem is the ".grid" div is taking the minimum height required according to it's content.

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

If you give ".grid" div height equal to 100vh you can see the result.

height: 100vh;

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

Here's a fiddle showing the result: https://jsfiddle.net/ayushgupta15/w30h5kep/

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

Please tell if this is the solution you're looking for.

这篇关于Flexbox:间隔不会在项目之间生成空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！