Flexbox: space-between does not generate space between items [duplicate]

问题

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>

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

回答1:

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

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

height: 100vh;

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

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

回答2:

Space-between is used for horizontal "box spacing". What you're looking for is margin.

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

like so.

<!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>

You can edit the top, right, left, bottom margin if you want to do so: