第一行2列,第二行3列的图片flex布局
时间: 2023-07-09 17:45:04 浏览: 54
可以使用flex布局来实现第一行2列,第二行3列的图片布局。具体实现方式如下:
HTML结构:
```
<div class="container">
<div class="row">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
</div>
<div class="row">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
</div>
</div>
```
CSS样式:
```
.container {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
width: 100%;
justify-content: space-between;
}
.row img {
width: calc(33.33% - 10px); /* 每列宽度占据1/3,减去10px是为了留出列与列之间的间隔 */
height: auto;
margin-bottom: 10px; /* 设置图片与图片之间的间隔 */
}
/* 第一行第一个图片的样式 */
.row:nth-child(1) img:nth-child(1) {
width: calc(66.66% - 10px); /* 第一列宽度占据2/3 */
}
```
这样就可以实现第一行2列,第二行3列的图片布局。具体思路是,使用flex布局将图片容器设置为弹性盒子,并使用flex-wrap属性实现自动换行。然后,每一行都是一个弹性盒子,使用justify-content属性实现左对齐和右对齐。最后,通过设置每个图片的宽度和高度,以及第一行第一个图片宽度的特殊样式,实现图片的布局。