CSS Flexbox：两个元素在 flex 方向上彼此重叠：row
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38729285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox: Two elements on top of each other in flex-direction: row
提问by Marc
I am trying to achieve the following:
我正在努力实现以下目标：
My first attempt was to use a helper div (green):
我的第一次尝试是使用辅助 div（绿色）：
What I could do here, is using JavaScript to move the puple and orange elements out of the helper on mobile screens. But there has to be a plain css way.
我在这里可以做的是使用 JavaScript 将紫色和橙色元素从移动屏幕上的助手中移出。但必须有一个简单的 css 方式。
My second attempt was to remove the helper and build the Mobile Layout:
我的第二次尝试是删除助手并构建移动布局：
Is there a way to place two elements on top of each other in flex-direction: row? (second attempt)
有没有办法将两个元素放在一起flex-direction: row？（第二次尝试）
采纳答案by Nenad Vracar
You could do this with Flexboxbut you need to use fixed heighton flex container. Here is Fiddle
你可以这样做，Flexbox但你需要height在 flex 容器上使用 fixed 。这是小提琴
Basically you use flex-wrap: wrapwith flex-direction: columnand make first item take 100% height and set widthin %. Then you change order with media queries and height.
基本上，您使用flex-wrap: wrapwithflex-direction: column并使第一个项目采用 100% 的高度并width以 %. 然后你用媒体查询和高度改变顺序。
* {
box-sizing: border-box;
}
main,
div {
display: flex;
padding: 1rem;
}
.desktop {
flex-direction: column;
flex-wrap: wrap;
height: 400px;
width: 100%;
}
div {
flex: 1;
width: 30%;
}
[orange] {
background-color: #FFAD77;
flex: 0 0 70%;
}
[yellow] {
background-color: #FFE377;
flex: 0 0 100%;
width: 70%;
}
[purple] {
background-color: #FF77C8;
}
@media(max-width: 480px) {
.desktop div {
flex: 1;
width: 100%;
}
div[orange] {
order: -1;
flex: 2;
}
div[yellow] {
flex: 5;
}
div[purple] {
flex: 1;
}
}<div class="desktop">
<div yellow>lorem</div>
<div orange>lorem</div>
<div purple>lorem</div>
</div>回答by 4castle
No, but the alternative isn't deadly. If you use absolute positioning, you will have much more control over the layout at different screen sizes.
不，但替代方案并不致命。如果您使用绝对定位，您将对不同屏幕尺寸的布局有更多的控制。
function toggleLayout() {
document.querySelector('main').classList.toggle('mobile');
}main {
position: relative;
width: 600px;
height: 400px;
}
main div {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
main.mobile div {
position: static;
width: 100%;
height: 33.3%;
}
[orange] {
background-color: #FFAD77;
bottom: 40%;
left: 66.6%;
}
[yellow] {
background-color: #FFE377;
right: 33.3%;
}
[purple] {
background-color: #FF77C8;
top: 60%;
left: 66.6%;
}<main>
<div orange></div>
<div yellow></div>
<div purple></div>
</main>
<button onclick="toggleLayout()">toggleLayout</button>回答by Oriol
The problem is that if you use a helper wrapper, then you will only be able to reorder the items inside it, but not mix them with their uncles.
问题是，如果您使用辅助包装器，那么您将只能重新排序其中的项目，而不能将它们与它们的叔叔混合。
And if you don't use a helper wrapper, you need a column layout. And the only widely supported way to break columns is hardcoding a height to the contaner, as Nenad Vracar suggested. But sometimes you can't do that.
如果您不使用辅助包装器，则需要一个列布局。正如 Nenad Vracar 建议的那样，唯一广泛支持的拆分列的方法是将高度硬编码到容器中。但有时你不能这样做。
I will suggest two better alternatives, but they have poor support (basically, Firefox):
我会推荐两个更好的选择，但它们的支持很差（基本上是 Firefox）：
Use a helper wrapper for desktop and get rid of it with
display: contentsin mobiledocument.querySelector('button').addEventListener('click', function() { document.querySelector('main').classList.toggle('mobile'); });main { display: flex; width: 600px; height: 400px; } .wrapper { display: flex; flex-direction: column; } div { flex: 1; } [data-color=orange] { background-color: #FFAD77; } [data-color=yellow] { background-color: #FFE377; } [data-color=purple] { background-color: #FF77C8; order: 3; } main.mobile { flex-direction: column; } main.mobile .wrapper { display: contents; } main.mobile [data-color=orange] { order: -1; }<main> <div data-color="yellow"></div> <div class="wrapper"> <div data-color="orange"></div> <div data-color="purple"></div> </div> </main> <button>toggleLayout</button>Use forced line breaks
document.querySelector('button').addEventListener('click', function() { document.querySelector('main').classList.toggle('mobile'); });main { display: flex; flex-flow: column wrap; width: 600px; height: 400px; } div { flex: 1; } [data-color=orange] { background-color: #FFAD77; page-break-after: always; break-after: always; } [data-color=yellow] { background-color: #FFE377; } [data-color=purple] { background-color: #FF77C8; order: 3; } main.mobile { flex-wrap: nowrap; } main.mobile [data-color=orange] { order: -1; }<main> <div data-color="yellow"></div> <div data-color="orange"></div> <div data-color="purple"></div> </main> <button>toggleLayout</button>
为桌面使用辅助包装器并
display: contents在移动设备中摆脱它document.querySelector('button').addEventListener('click', function() { document.querySelector('main').classList.toggle('mobile'); });main { display: flex; width: 600px; height: 400px; } .wrapper { display: flex; flex-direction: column; } div { flex: 1; } [data-color=orange] { background-color: #FFAD77; } [data-color=yellow] { background-color: #FFE377; } [data-color=purple] { background-color: #FF77C8; order: 3; } main.mobile { flex-direction: column; } main.mobile .wrapper { display: contents; } main.mobile [data-color=orange] { order: -1; }<main> <div data-color="yellow"></div> <div class="wrapper"> <div data-color="orange"></div> <div data-color="purple"></div> </div> </main> <button>toggleLayout</button>使用强制换行
document.querySelector('button').addEventListener('click', function() { document.querySelector('main').classList.toggle('mobile'); });main { display: flex; flex-flow: column wrap; width: 600px; height: 400px; } div { flex: 1; } [data-color=orange] { background-color: #FFAD77; page-break-after: always; break-after: always; } [data-color=yellow] { background-color: #FFE377; } [data-color=purple] { background-color: #FF77C8; order: 3; } main.mobile { flex-wrap: nowrap; } main.mobile [data-color=orange] { order: -1; }<main> <div data-color="yellow"></div> <div data-color="orange"></div> <div data-color="purple"></div> </main> <button>toggleLayout</button>
