到目前为止我尝试了什么

Question

我有以下HTML / CSS设置（jsFiddle）：

＆＃13;

.flex-container {
  display:flex;
  flex-direction:column;
}

.one, .two, .three {
  flex: 0 0 auto;
}

.one {
  order:0;
}

.two {
  order:1;
}

.three {
  order:2;
}

＆＃13;

<div class="flex-container">
  <div class="three">
    <div class="one">One</div>
    <div>Three</div>
  </div>
  <div class="two">Two</div>
</div>

＆＃13;

如您所见，我的目标是在顶部订购div .one。问题是这个div是里面一个具有不同order的flex div。

到目前为止我尝试了什么

position:absolute

fixed或.one。虽然这有效，但我需要所有的div都是块。
我已使用javascript将.one div移动到父div，但目的是在没有 JS的情况下执行此操作。

任何可行的解决方案吗？

Answer 1

我相信你错过了order背后的整个概念。它旨在允许重新安排兄弟姐妹。如果您希望在.two和.one之间以某个屏幕宽度显示.three，并在其他宽度之外显示.one：

他们应该是兄弟姐妹
.three成为.flex-container { display:flex; flex-direction:column; } .two { background-color: rgba(0,0,0,.05) } @media (min-width: 768px) { .two { order:1; } .one,.three { order: 2; } }的孩子绝对没有意义。

所以，我会使用移动优先布局：

<div class="flex-container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

.one

但是，如果.three 必须是@media的孩子（顺便说一下，当您在网络开发中开始使用此动词时，它是稳固的签名你做错了） - 你唯一的选择就是JavaScript。现在js驱动@media查询的问题是你需要成为一个跨浏览器/跨设备的忍者来检测所有浏览器/设备组合中.two查询间隔的变化，这就是你应该这样做的原因使用enquire.js。当然，在DOM中移动{{1}}。

但实际上，既然我尽力回答你的问题，如果你尽力回答我的话，对我来说意义重大：为什么加价需要保持不变？标记是否重要？或者您的内容跨浏览器/跨设备显示的方式是什么？

如何在父元素之前订购子flex元素？

到目前为止我尝试了什么

1 个答案: