Flexwrap and Align Content

Get Help Make & Deploy a Website
#1

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

#2

Could copy and paste all the css and html? I think there might be some info that is not in the screenshot.

#3

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>
#4

we can’t run code from a screenshot, please post the code like you did with css

#5

Oh okay. Done. I apologise.

#6

this has nothing to do with the margin, this is caused by flex itself

#7

Okay cool.

Thank you very much.

Regards,

CEdobor

#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.