如何使用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);
}