Question

我试图获得＆＃34; Mac和奶酪真的是百胜！＆＃34;在＆＃34;网站的主要内容＆＃34;。

＆＃13;

beta

＆＃13;

#content {
  padding: 0;
  background: 0;
  float: none;
  width: auto;
}
.heading {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
#content h1 {
  text-align: left;
  width: 100%;
  float: none;
  margin: 0 0 10px;
  font: 2.538em/1.3em;
  color: #393939;
}
#content .text {
  order: 1;
}

＆＃13;

http://codepen.io/anon/pen/KMPydJ

感谢任何帮助 - 谢谢！

Answer 1

CSS order属性仅适用于兄弟姐妹。

在您的代码中，您尝试重新定位.text，这是灵活项目（.heading）的子项，以.main-content之后显示。

嗯，.heading和.main-content是兄弟姐妹。但是.text就像.main-content的侄女，所以order属性不起作用。

一旦.text .main-content成为兄弟姐妹，您就可以获得所需的订单。

在下面的修订代码中，我删除了您的.heading元素。现在h1，.text和.main-content都是兄弟姐妹。

#content {
  display: flex;
  flex-direction: column;
}
h1 {
  margin: 0 0 10px;
  font: 2.538em/1.3em;
  color: #393939;
}
.text {
  order: 1;
}

<div id="content">
  <h1>Mac and Cheese</h1>
  <div class="text">
    <p>Mac and cheese is really yum!</p>
  </div>
  <div class="main-content">The main content of the site</div>
</div>

在此处详细了解order媒体资源：https://stackoverflow.com/a/36118012/3597276

Flex订单属性未按预期工作

1 个答案: