css - How to make a layout, where the 3rd child is full width? -

is possible make following layout flexbox? or recommended way?

example code (getting images api):

<div class="container">  {images.map(image => {    return(        <div class="item">           <img src={image.thumbnail} />        </div>    );  })} </div> 

example css:

.container {   display: flex;   flex-flow: row wrap; }  img:nth-child(3) {    flex: 1 100%; } 

simply set flex-basis: 100% third flex item

an additional rule setting img width: 100% make them size properly.

also, best cross browser support, keep wrapper around each img

.container {    display: flex;    flex-flow: row wrap;  }    .item {    background: lightgray;    flex-basis: calc(50% - 10px);    margin: 5px;  }    .item:nth-child(3) {    flex-basis: calc(100% - 10px);  }    .item img {    width: 100%;  }

<div class="container">         <div class="item">            <img src='http://placehold.it/300x100' />         </div>         <div class="item">            <img src='http://placehold.it/300x100' />         </div>         <div class="item">            <img src='http://placehold.it/300x100' />         </div>         <div class="item">            <img src='http://placehold.it/300x100' />         </div>         <div class="item">            <img src='http://placehold.it/300x100' />         </div>         <div class="item">            <img src='http://placehold.it/300x100' />         </div>         <div class="item">            <img src='http://placehold.it/300x100' />         </div>  </div>