Suomi Suomi - 3 years ago 90
CSS Question

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

Is it possible to make the following layout just with Flexbox? Or what would be the recommended way?

example layout of images

Example code (getting images from an 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%;
}

Answer Source

Simply set flex-basis: 100% to your third flex item

An additional rule setting the img to width: 100% will make them size properly.

Also, for best cross browser support, keep the 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download