Flex顺序属性无法正常工作 [英] Flex order property not working as expected

问题描述

我想得到Mac和奶酪真的是yum！下面的网站的主要内容。

  #content {padding：0;背景：0; float：none; width：auto;}。heading {display：flex;显示：-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;}  

 < div id =content> < div class =heading> < h1> Mac和奶酪< / h1> < div class =text> < p> Mac和奶酪真的是yum！< / p> < / div> < / div> < div class =main-content>网站的主要内容< / div>< / div>  

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

任何帮助，谢谢！

解决方案

CSS

在您的代码中，您尝试重新定位 .text ，它是一个flex项目（ .heading ）的子项，出现在 .main-content 。

好吧， .heading 和 .main-content 是兄弟姐妹。但 .text 就像一个侄子 .main-content ，所以 code>属性将不起作用。

一次 .text 一个。

在下面修改的代码中，我已删除了您的 .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和奶酪< / h1> < div class =text> < p> Mac和奶酪是真的yum！< / p> < / div> < div class =main-content>网站的主要内容< / div>< / div>  

/ p>

在此处了解有关订单属性的更多信息： http://stackoverflow.com/a/36118012/3597276

I'm trying to get "Mac and cheese is really yum!" underneath "The main content of the site".

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

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

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

Any help is appreciated -- thanks!

解决方案

The CSS order property applies only to siblings.

In your code, you are trying to re-position .text, which is a child of a flex item (.heading), to appear after .main-content.

Well, .heading and .main-content are siblings. But .text is like a niece to .main-content, so the order property won't work.

Once .text an .main-content are siblings you can achieve the ordering you want.

In the revised code below, I've removed your .heading element. Now the h1, .text and .main-content are all siblings.

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

Learn more about the order property here: http://stackoverflow.com/a/36118012/3597276

这篇关于Flex顺序属性无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！