跨多个容器使用flex属性
跨多个容器使用flex属性
提问于 2017-07-20 22:21:25
如果我有以下HTML标记：
<div class="wrapper">
<div id="container-1">
<div class="child-1-1"></div>
<div class="child-1-2"></div>
</div>
<div id="container-2">
<div class="child-2-1"></div>
<div class="child-2-2"></div>
</div>
</div>我可以将flex的显示应用到包装器中，然后使用order将容器-2显示在容器-1之上。
我希望这些要素的最后顺序是：
- 儿童-2-1
- 儿童-1-1
- 儿童-1-2
- 儿童-2-2
我想要的基本上是两个容器的孩子假装他们的父母不在那里，而是从外面的包装纸上拿他们的订单。
当然，这可以通过复制组件并根据断点隐藏/显示，或者通过JS来实现--因此没有提出这些建议的要点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-20 22:37:56
flex order属性仅适用于同一容器中的兄弟姐妹。
因此，使用order重新安排分布在不同容器上的一系列flex项目是行不通的。
但是根据您的需求，您似乎不需要多个容器。所有项目都可以存在于一个容器中。
.wrapper {
display: flex;
flex-wrap: wrap;
}
.child-1-1 { order: 1; }
.child-1-2 { order: 3; }
.child-2-1 { order: 2; }
.child-2-2 { order: 4; }
.wrapper > div {
flex: 1 0 40%;
height: 50px;
margin: 5px;
border: 1px solid #ccc;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
}
@media ( max-width: 600px) {
.wrapper {
flex-direction: column;
}
div.child-2-1 {
order: -1;
background-color: orange;
}
}<div class="wrapper">
<div class="child-1-1">child-1-1</div>
<div class="child-1-2">child-1-2</div>
<div class="child-2-1">child-2-1</div>
<div class="child-2-2">child-2-2</div>
</div>
在这里了解有关flex order属性的更多信息：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45226114
复制相关文章
相似问题
腾讯云开发者
