Question

我最近开始学习flexbox。我试图在.parent容器内的div之间设置边距，但边距没有显示。此外，如果我给任何.child div赋予宽度值，它们仍会扩展以覆盖整个窗口。我哪里错了？

body {
	margin: 0;
	padding: 0;
}
.parent {
	display: flex;
	height: 100px;
	border: 2px solid black;
	justify-content: space-between;
}

.child {
	flex: 1;
	width: 32%;
	margin: auto;
	height: 100px;
	border: 2px solid blue;
	background: green;

}

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="parent">
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</body>
</html>

Answer 1

您需要移除flex: 1;，这会导致div调整大小以填充空白区域。

body {
	margin: 0;
	padding: 0;
}
.parent {
	display: flex;
	height: 100px;
	border: 2px solid black;
	justify-content: space-between;
}

.child {
	width: 32%;
	margin: auto;
	height: 100px;
	border: 2px solid blue;
	background: green;

}

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="parent">
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</body>
</html>

Answer 2

＆＃34;余量＆＃34;在flexbox中，主要由容器的宽度控制，而不是通过指定边距。使用flex-basis确定容器的宽度并移除flex: 1。这是导致容器扩张的原因。并记住它＆＃34; flex＆＃34;框。它意味着流畅，所以试图让像保证金这样的东西的静态值失去目的。

提示：调试时使用背景颜色而不是边框。边框影响宽度，可能会给您带来麻烦。欢呼声。

＆＃13;

body {
	margin: 0;
	padding: 0;
}
.parent {
	display: flex;
	height: 100px;
	justify-content: space-between;
  background-color: blue;
}

.child {
	flex-basis: 20%;
	height: 100px;
	background: green;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="parent">
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</body>
</html>

＆＃13;

Answer 3

正如Hunter Turner所说，如果你删除flex: 1它会起作用。此属性设置项目相对于其他项目的长度。

MDN Docs

body {
	margin: 0;
	padding: 0;
}
.parent {
	display: flex;
	height: 100px;
	border: 2px solid black;
	justify-content: space-between;
}

.child {
	width: 32%;
	margin: auto;
	height: 100px;
	border: 2px solid blue;
	background: green;

}

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="parent">
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</body>
</html>

为什么在flex-items之间没有设置边距？

3 个答案: