我最近开始学习flexbox。我正在尝试在.parent容器内的div之间设置边距，但是未显示边距。另外，如果我给任何一个.childdiv设置一个width值，它们仍然会扩展以覆盖整个窗口。我要去哪里错了？
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>您需要删除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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句