Question

我和我的许多同学在使用flexbox CSS 时遇到问题，其中row和row-reverse未被接受为flex-direction的有效参数。我主要使用Atom，当我尝试将它们用于“flex-direction”时，row和row-reverse只显示为灰色。 “列”和column-reverse工作正常。以下是我目前使用的代码的 CSS （问题在最后）。这不是我遇到这个问题的唯一时间：

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;
  }
}

这是我现在拥有的 HTML ：

<!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>

CSS中的“row”和“row-reverse”灰色/无效

0 个答案: