.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元素?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)