CODEWITHSUNDEEP
cssflexbox
Br34th7aking
Br34th7aking

Reputation: 89

Why are margins not getting set between flex-items?

I have recently started learning flexbox. I am trying to set margins between the divs inside the .parent container, but the margin is not displaying. Also, if I give a width value to any of the .child divs, they still expand to cover the whole window. Where am I going wrong? 

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>

Upvotes: 0

Views: 896

Answers (3)

ZeroWorks
ZeroWorks

Reputation: 1638

As Hunter Turner says if you remove flex: 1 it will work. This property sets the length of the item relative to the others.

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>

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

"margins" in flexbox are going to be controlled mainly by the width of your containers, not by specifying margins. Use flex-basis to determine the width of your containers and remove the flex: 1. That's what's causing your containers to expand. And remember it's "flex" box. it's meant to fluid, so trying to adapt static values for things like margin defeats the purpose.

Tip: When debugging use background colors and not borders. Borders effect width and can cause you trouble. Cheers.

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;

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

Upvotes: 2

Hunter Turner
Hunter Turner

Reputation: 6894

You need to remove flex: 1;, which is causing the div's to resize to fill the empty space.

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>

Upvotes: 3

Related Questions