在flexbox中跨越两行

Question

我尝试使用flexbox实现以下布局，以便左列跨越两行。这有可能吗？

谢谢！

Answer 1

嗯简单但是会做到这一点，你只需要使用多个flex容器，其中一个将有一个flex-direction：column ...

<style type="text/css">
    .main {}
    .flex {display: flex;}
    .flex-3 {flex-grow: 3}
    .flex-1 {flex-grow: 1}
    .big-image {width: 100%;height: 400px;}
    .small-image {width: 100%;height: 200px;}
    .flex.column {flex-direction: column;}
    body img {width: 85%;display: block; margin: auto;background-color: white;}

</style>

<div class="main">

    <div class="flex">
        <div class="flex-3"><img class="big-image"></div>

        <div class="flex flex-1 column" >
               <div class="flex-1"><img class="small-image"></div>
               <div class="flex-1"><img class="small-image"></div>
        </div>
    </div>

</div>