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%设置为您的第三个弹性项目

即可

将img设置为width: 100%的其他规则将使其大小合适。

此外，为了获得最佳的跨浏览器支持，请保留每个img 的包装器

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

也许我不能正确理解你想要的东西，但这里是：

请参阅下面的jsFiddle或摘录

＆＃13;

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

＆＃13;

<div class="container">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>

＆＃13;

Answer 3

在你的例子中，你正在做img：nth-child（3）但是你的图像用div包裹。所以你的图像不是灵活的孩子。以下是您的问题的可能解决方案：

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div{
  width: 50%;
  /* just for demonstration, not needed: */
  text-align:center;
  margin-bottom: 10px;
  background-color: #eee;
  border: 2px solid white;
  box-sizing: border-box;
}

.container div:nth-child(3) {
   width: 100%;
}

＆＃13;

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

＆＃13;

Answer 4

你的CSS工作，你只需要一个额外的规则，让其他图像分别获得两个到其他行，加上你可以省去包装DIV（如果这不可能/不需要，只需将相同的规则应用于DIVs相反，并将所有图像宽度设置为100％）：

.container {
  display: flex;
  flex-flow: row wrap;
}
img {
box-sizing: border-box;
width: 50%;
padding: 10px;
}
img:nth-child(3) {
   flex: 1 100%;
}

<div class="container">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
<img src="http://placehold.it/500x200/ed8">
</div>

如何制作第3个孩子全宽的布局？

4 个答案: