Hey so in lesson 11 of the first Flexbox lesson, here’s the code:
Why does the third box in the second row in the flex-start container start so much lower than the first line? Shouldn’t it start just below it? The margin space is 2px.
Regards,
CEdobor
renoj
May 23, 2018, 2:58pm
#2
Could copy and paste all the css and html? I think there might be some info that is not in the screenshot.
CSS:
body {
font-family: 'Roboto Mono', monospace;
}
h1 {
margin: 20px;
text-align: center;
font-size: 18px;
}
.container {
height: 300px;
width: 600px;
background-color: WhiteSmoke;
display: flex;
flex-wrap: wrap;
margin: auto;
}
.left,
.center,
.right {
height: 75px;
width: 200px;
margin: 2px;
background-color: DodgerBlue;
border: 2px solid lightgrey;
}
#flexstart {
}
#flexend {
}
#center {
}
#between {
}
#around {
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Align Content</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
</head>
<body>
<h1>Flex Start</h1>
<div class="container" id="flexstart">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<h1>Flex End</h1>
<div class="container" id="flexend">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<h1>Center</h1>
<div class="container" id="center">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<h1>Space Between</h1>
<div class="container" id="between">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<h1>Space Around</h1>
<div class="container" id="around">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<h1>Stretch</h1>
<div class="container" id="stretch">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
we can’t run code from a screenshot, please post the code like you did with css
Oh okay. Done. I apologise.
this has nothing to do with the margin, this is caused by flex itself
system
closed
May 31, 2018, 12:38pm
#8
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.