css - 如何进行布局，其中第三个 child 是全宽的？

Question

是否可以仅使用 Flexbox 进行以下布局？或者推荐的方法是什么？

示例代码(从 API 获取图像):

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

示例 CSS:

.container {
  display: flex;
  flex-flow: row wrap;
}

img:nth-child(3) {
   flex: 1 100%;
}

Answer 1

只需将 flex-basis: 100% 设置为您的第三个 flex 元素

将 img 设置为 width: 100% 的附加规则将使它们的大小合适。

此外，为了获得最佳的跨浏览器支持，请在每个 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>