0

I, and many of my classmates, are experiencing an issue with flexbox CSS where row and row-reverse are not being accepted as valid arguments for flex-direction. I am primarily using Atom, and row and row-reverse just appear grayed out when I try to use them for "flex-direction". "column" and column-reverse work just fine. Here is the CSS for the code I am currently working with (the issue is at the end). This isn't the only time I have had this problem:

body {
  font-family: sans-serif;
}

.content-label {
  padding: 10px;
}

header {
  background-color: #aaa;
  height: 60px;
  padding: 0;
}

header {
  margin-bottom: 10px;
}

.article-container {
 height: 90%;
 width: 100%;
}

.content-one, .content-two, .content-three {
  width: 100%;
  height: 200px;
}

.content-one {
  background-color: #f00;
}

.content-two {
  background-color: #00f;
}

.content-three {
  background-color: #0f0;
}

body {
  display: flex;
}

@media only screen and (min-width: 800px) {
  body {
    flex-direction: row;
    justify-content: space-between;
  }
}

Here is the HTML as I have it right now:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Responsive CSS</title>
    <link rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"     type="text/css" media="all">
    <link rel="stylesheet" href="./css/main.css" type="text/css"     media="all">
  </head>
  <body>
    <header>
      <p class="content-label">header</p>
    </header>
    <section class="article-container">
      <article class="content-one">
        <p class="content-label">one</p>
      </article>
        <article class="content-two">
          <p class="content-label">two</p>
        </article>
        <article class="content-three">
          <p class="content-label">three</p>
        </article>
    </section>
  </body>
</html>
splash
  • 13,037
  • 1
  • 44
  • 67
Nick Fallon
  • 11
  • 2
  • CSS looks fine. btw, `flex-direction` default value is `row`, you don't need to explicitly set it, – pol Feb 20 '17 at 19:01
  • what about using flex-flow ? is that also in issue in your tests ? flex-direction:row; is meant to be the defaut value; does the flex boxmodel being still trigered or is not at all ? Your code does not show any clue of your issue, only justify-content seems to be updated on mediaquerie here – G-Cyrillus Feb 20 '17 at 19:01
  • Could you post your markup as well – Asons Feb 20 '17 at 19:08
  • Ok, thank you for clarifying that `row` is the default value. I still, however, have the issue if I change `row` to `row-reverse`. – Nick Fallon Feb 20 '17 at 19:11
  • Are you trying to make each article appear in a row? You will need to add the flex display to the section `.article-container`. The only flexboxes are the direct children. So in your case, when adding it to the body, only the header and the section are flexboxes. – pol Feb 20 '17 at 19:29
  • I did not know the flex only applied to direct children, so thank you so much! – Nick Fallon Feb 20 '17 at 19:36

0 Answers0