Question

我希望这可以用flexbox完成，而不需要（太多）欺骗。

我在寻找：

1）一个大块，旁边有两个较小的块，没有自己的嵌套包装。 Working Example

2）以固定宽高比调整大小的百分比宽度，可能使用填充顶部/底部技巧。这可以仅在大块，较小块或两者上定义。我说/或/和因为我不太在乎小块与较大块的宽高比相匹配。也许宽高比只能应用于较大的块，较小的块可以弯曲到高度。只要它们相对于容器的宽度一起调整大小，那就没问题了。 Working Example

最后一点是我遇到主要障碍的地方。带有rowspan的第一个示例看起来很棒，但依赖于具有定义高度的包裹，这会破坏响应性。当我尝试控制块的高度而不是包装时，事情开始崩溃。

这是我的非工作work in progress（或以下）

谢谢！

<div class="gallery">
   <div class="gallery-group">
       <div class="a"></div>
       <div class="b"></div>
       <div class="c"></div>
   </div>
</div>

.gallery {
   position: relative;
   height: auto;
   margin: 0 12%;
   background-color: transparent;
   display: flex;
}

.gallery-group {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;

   width: 100%;
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0;
   align-items: stretch;
   flex-wrap: nowrap;
}

.a, .b {
  flex: 0 0 50%;
  align-self: flex-start;
  width:30%;
  padding-top:22%;
}

.c {
  flex: 0 0 100%;
  align-self: flex-end;
  width:70%;
  padding-top:50%;
}

Answer 1

我想我明白了，我在CodePen.io中调整了大小。左栏在绿色和红色柔性物品上始终保持35％宽度和50％高度。右栏保持65％宽度和100％高度。看看这里：

CODEPEN

<强> CSS

.gallery {
   position: fixed;
   background-color: transparent;
   display: flex;
   width: 100vw;
   height: 100vh;
   flex-flow: column wrap;

}

.gallery-group {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-self: stretch;
   width: 100%;
   height: 100%;
   position: relative;
}


.a, .b {
   flex: 1 1 1%;
   width: 35%;
   height: 50%;
   position: absolute;
   left: 0px;
}

.a { top: 0px }
.b { bottom: 0px }

.c {
   flex: 1 1 1%;
   align-self: stretch;
   width: 65%;
   padding-top: 35%;
   position: absolute;
   top: 0px;
   bottom: 0;
   right: 0px;
}

.a { background: red; }
.b { background: green; }
.c { background: blue; }

具有行距和固定宽高比的Flexbox

1 个答案: