CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

Jake Salo
Jake Salo
13,175 Points

Code challenge not accepting valid code?

CSS Flexbox course has a code challenge asking me to make the container a multi-line container. I have written code which does exactly what it is asking (i can see it works in the preview window), but it still says that it is not correct and doesn't let me pass the challenge stage.

style.css
/* Complete the challenge by writing CSS below */

.row {
  display: flex;
  flex-direction: column;
}
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

1 Answer

Ryan S
Ryan S
27,264 Points

Hi Jake,

The 2nd part of the challenge is looking for the "flex-wrap" property. This will allow for multiple lines in the container. The flex-direction is only setting the direction the flex items will be arranged.

Good luck.

Jake Salo
Jake Salo
13,175 Points

I'm irritated at how stupid i was now, completely misunderstood the question. Thanks a lot Ryan!