柔性包装的边距 [英] margin with flex wrap
本文介绍了柔性包装的边距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 display:flex
和 flex-wrap:wrap
在div之间添加一些间距.
I am trying to add some spacing between the divs using display: flex
and flex-wrap: wrap
.
问题是当我将 margin-right
应用于第二个项目时,行中断了.如何在项目之间增加一些间距而不将它们分成2行?
The problem is that when I apply margin-right
to the second item, the row breaks. How can I add some spacing between the items without breaking them in 2 rows?
* {
box-sizing: border-box;
}
// Default
// ----------------------------------------------------
.collage {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-bottom: 32px;
}
.collage-item {
width: 100%;
height: 25vw;
background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
background-size: cover;
flex: 0 0 50%;
&: nth-child(1) {
margin-bottom: 16px;
}
&:nth-child(2) {
margin-right: 16px;
}
&:nth-child(4) {
margin-top: 16px;
}
&:nth-child(1),
&:nth-child(4) {
flex: 0 0 100%;
height: 50vw;
}
}
// Button
// ----------------------------------------------------
.btn {
position: absolute;
border: 2px solid white;
padding: 10px 18px;
text-align: center;
right: 16px;
bottom: 16px;
color: white;
text-decoration: none;
}
<div class="collage">
<div class="collage-item"></div>
<div class="collage-item"></div>
<div class="collage-item"></div>
<div class="collage-item"></div>
<div class="btn">View all 11 photos</div>
</div>
推荐答案
您正在将基础设置为 50%
,然后在添加边距时会推送下一个元素,因为无法并排放置一边了.您可能希望让项目增长,并避免使用该依据:
You are setting the basis to 50%
then when you add the margin it push the next element since can't fit side by side anymore. You may want to let the items grow and avoid the basis:
.collage-item {
flex: 1 0 auto;
}
这篇关于柔性包装的边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文