如何在页面布局之外拉伸内容

Question

我正在尝试创建这个设计，内容在浏览器窗口的左右伸展。

这是我尝试过的:

.ig-feed{
position: relative;
height: 664px;
overflow: hidden;
}
.ig-feed .ig-feed__feed-container{
height: 260px;
position: absolute;
left: -146px;
right: -146px;
display: flex;
justify-content: space-between;
}

<div class="ig-feed">
<div class="ig-feed__feed-container">
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
</div>
</div>

由于justify-content: space-between;

，我的设计在图像之间占用了更多的空间我应该如何让它只在图像之间的20px与拉伸一直到左和右。

我Jsfiddle

请帮忙将不胜感激。

Answer 1

您可以添加margin-right，并取决于您的屏幕大小，您可以为您的图像提供响应的width值

.ig-feed__feed-container a {
margin-right: 20px;
}

.ig-feed{
position: relative;
height: 664px;
overflow: hidden;
}
.ig-feed .ig-feed__feed-container{
height: 260px;
position: absolute;
left: -146px;
right: -146px;
display: flex;
}
.ig-feed__feed-container a {
margin-right: 20px;
}

<div class="ig-feed">
<div class="ig-feed__feed-container">
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
</div>
</div>

Answer 2

您可以添加一个值的gap属性(如您所提到的添加20px)来添加它们之间的间隙。根据上面提到的设计，我相信这就是您想要的。

.ig-feed{
position: relative;
height: 664px;
overflow: hidden;
}
.ig-feed .ig-feed__feed-container{
height: 260px;
position: absolute;
left: -146px;
right: -146px;
display: flex;
gap:20px;
justify-content: space-between;
}

<div class="ig-feed">
<div class="ig-feed__feed-container">
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
<a href="#"><img src="https://picsum.photos/seed/picsum/200/300" alt="Insta Image"></a>
</div>
</div>