Flexwrap and Align Content

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

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

Okay cool.

Thank you very much.

Regards,

CEdobor

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