如何使用CSS属性“ display：flex;”标记布局块？

Question

在其中一个项目中决定使用新的CSS属性“ display：flex;”。 看了很多文章之后，还不了解是否有可能在不违反HTML代码的情况下制作这样的布局块。

见图片：

 .container { width:910px; display:flex; } figure { position:relative; width:300px; height:180px; } figure:first-child { width:600px; height:370px; } figure:first-child figcaption { width:590px; } figure figcaption { position:absolute; z-index:10; bottom:0; left:0; padding:5px; width:290px; background-color:rgba(0,0,0,.3); } 

 <div class="container"> <figure> <img src="http://placehold.it/600x370" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure> <figure> <img src="http://placehold.it/300x180" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure> <figure> <img src="http://placehold.it/300x180" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure> </div> 

在JSFiddle上也有一个准备好的代码

对不起我的英语不好。

Answer 1

更新为使用CSS列https://jsfiddle.net/vzjhybh0/4/

    <figure>
        <img src="http://placehold.it/600x370" alt="">
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
    </figure>

    <figure>
        <img src="http://placehold.it/300x180" alt="">
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
    </figure>

    <figure>
        <img src="http://placehold.it/300x180" alt="">
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
    </figure>

</div>

.container {
    width:1100px;
    height:400px;
     -webkit-columns: 2;
}

figure {
    position:relative;
    width:300px;
    height:180px;
}

figure:first-child {
    width:600px;
    height:370px;
}

figure:first-child figcaption {
    width:590px;
}

figure figcaption {
    position:absolute;
    z-index:10;
    bottom:0;
    left:0;
    padding:5px;
    width:290px;
    background-color:rgba(0,0,0,.3);
}