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

概述我有以下 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;} <d 我有以下 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 >  <div >    <div >One</div>    <div>Three</div>  </div>  <div >Two</div></div>

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

到目前为止我尝试过的

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

任何可行的解决方案吗？

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

>他们应该是兄弟姐妹
>绝对没有任何意义.一个人是.three的孩子.

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

.flex-container {  display:flex;  flex-direction:column;}.two {  background-color: rgba(0,.05)  }@media (min-wIDth: 768px) {  .two { order:1; }  .one,.three { order: 2; }}

<div >  <div >One</div>  <div >Two</div>  <div >Three</div></div>

但是,如果.one必须是.three的孩子(顺便说一下,当你开始在web开发中使用这个动词时,你做错了就是一个坚实的标志) – 你唯一的选择就是JavaScript.现在Js驱动的@media查询的问题是你需要成为一个跨浏览器/跨设备的忍者来检测所有浏览器/设备组合中@media查询间隔的变化,这就是你应该使用enquire.js的原因.当然,在DOM中移动.two.

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

总结

以上是内存溢出为你收集整理的html – 如何在父元素之前订购子flex元素？全部内容，希望文章能够帮你解决html – 如何在父元素之前订购子flex元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。