" rowspan的"与flexbox行为 [英] "rowspan" behavior with flexbox

问题描述

给出这个标记：

 < div class =foo> 
< div class =a>< / div> 
< div class =b>< / div> 
< div class =c>< / div> 
< / div> 
  

和CSS：

  .foo {
 display：flex; 
 flex-wrap：wrap; 
} 
 
 .a {
 flex：none; 
宽度：50％; 
 height：100px; 
背景：绿色; 
} 
 
 .b {
 flex：none; 
宽度：50％; 
 height：200px; 
背景：蓝色; 
} 
 
 .c {
 flex：none; 
宽度：50％; 
 height：100px; 
背景：红色; 
} 
  

> jsFiddle

有没有办法把红框放在前一行的流中？我想避免修改标记。

这里的想法是，元素应该有不同的肖像和风景模式之间的布局，这是唯一的方法来做到这一点仅限于CSS的是使用带有顺序属性的flexbox。据我所知，使用中间元素将会锁定它的子元素。

解决方案

这就是你要找的东西吗？ p>

  .foo {
 display：flex; 
 flex-wrap：wrap; 
 flex-direction：column; 
 height：200px; 
} 
 
 .a，.c {
 flex：0 0 50％; 
背景：绿色; 
} 
 
 .b {
 flex：0 0 100％; 
 order：1; 
背景：蓝色; 
} 
 .c {
 background：red; 
} 
  

快速codepen示例与-webkit-前缀

更新！ 调整笔与横向/纵向比例

Given this markup :

<div class="foo">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

And CSS:

.foo {
    display: flex;
    flex-wrap: wrap;
}

.a {
    flex: none;
    width: 50%;
    height: 100px;
    background: green;
}

.b {
    flex: none;
    width: 50%;
    height: 200px;
    background: blue;
}

.c {
    flex: none;
    width: 50%;
    height: 100px;
    background: red;
}

jsFiddle

Is there a way to put the red box in the previous row stream ? I would like to avoid modifying the markup.

The idea here is that the elements should have different layouts between portrait and landscape mode, and that the only way to do it in CSS-only is to use flexbox with the order property. As far as I know, using an intermediate element would lock its children.

解决方案

is this what you are looking for?

.foo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 200px;
}

.a, .c {
  flex: 0 0 50%;
  background: green;
}

.b {
  flex: 0 0 100%;
  order: 1;
  background: blue;
}
.c {
  background: red;
}

Quick codepen sample with -webkit- prefixes

UPDATE! Tuned pen with landscape/portrait ratios

这篇关于" rowspan的"与flexbox行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！