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

Question

In one of the project decided to use the new CSS property "display:flex;". After reading many articles and did not understand whether it is possible to make such a layout blocks without violating HTML code.

See image:

 .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> 

Also there is a ready code on JSFiddle

Sorry for my English.

Answer 1

Updated to use CSS columns 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);
}