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

2019年7月28日 193次阅读

我有以下
HTML / CSS设置(
jsFiddle)：

.flex-container {
  display:flex;
  flex-direction:column;
}

.one, .two, .three {
  flex: 0 0 auto;
}

.one {
  order:0;
}

.two {
  order:1;
}

.three {
  order:2;
}
<div class="flex-container">
  <div class="three">
    <div class="one">One</div>
    <div>Three</div>
  </div>
  <div class="two">Two</div>
</div>

正如你所看到的,我的目标是在顶部订购div .one.问题是这个div位于具有不同顺序的flex div内.

到目前为止我尝试过的

>位置：绝对或固定在.one上.虽然这有效,但我需要所有的div都是块.
>我已经使用javascript将.one div移动到父div,但目的是在没有JS的情况下执行此操作.

任何可行的解决方案吗？

最佳答案 我相信你错过了订单背后的整个概念.它旨在允许重新安排兄弟姐妹.如果要在某个屏幕宽度处显示.one和.tree之间以及在其他宽度之外显示.two：

>他们应该是兄弟姐妹
>绝对没有任何意义.一个人是.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的孩子(顺便说一下,当你开始在web开发中使用这个动词时,你做错了就是一个坚实的标志) – 你唯一的选择就是JavaScript.现在js驱动的@media查询的问题是你需要成为一个跨浏览器/跨设备的忍者来检测所有浏览器/设备组合中@media查询间隔的变化,这就是你应该使用enquire.js的原因.当然,在DOM中移动.two.

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

点赞