如何为flex为0:0 25%的flex项目添加1px的边距?

我正在用flexbox测试几种不同的布局,但存在以下问题。

我有一个设置了弹性项目的图片库,flex:0 0 25%;我想为它们添加1px的边距,因为1%很大。所以我想知道在这种情况下该怎么办。

我附上以下示例。

#foto-container {

display: flex;

flex-wrap: wrap;

flex: 1;

justify-content: space-around;

margin: 10px;

}

.foto {

flex: 0 0 25%;

min-height: 200px;

background-color: red;

}

/*---------How I can add 1px to photo?-----------------*/

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="foto-container">

<div class="foto foto1">1</div>

<div class="foto foto2">2</div>

<div class="foto foto3">3</div>

<div class="foto foto4">4</div>

<div class="foto foto5">5</div>

<div class="foto foto6">6</div>

<div class="foto foto7">7</div>

<div class="foto foto8">8</div>

<div class="foto foto9">9</div>

<div class="foto foto1">1</div>

<div class="foto foto2">2</div>

<div class="foto foto3">3</div>

</div>

谢谢,

回答:

您可以使用flex: 1 0 22%例如。这将使您的元素定义22%flex-basis

(每行仅4个元素),并且它们将增长以填充由边距留下的剩余空间(因为flex-grow设置为1

#foto-container {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

margin: 10px;

}

.foto {

flex: 1 0 22%;

min-height: 50px;

margin: 1px;

background-color: red;

}

<div id="foto-container">

<div class="foto foto1">1</div>

<div class="foto foto2">2</div>

<div class="foto foto3">3</div>

<div class="foto foto4">4</div>

<div class="foto foto5">5</div>

<div class="foto foto6">6</div>

<div class="foto foto7">7</div>

<div class="foto foto8">8</div>

<div class="foto foto9">9</div>

<div class="foto foto1">1</div>

<div class="foto foto2">2</div>

<div class="foto foto3">3</div>

</div>

的值flex-basis应大于(20% - margin * 2)和小于(25% - margin *

2)。第一个值将使您每行具有5个元素,因此,具有更大的值将使它们变为4,而具有比第二个更大的值将使您每行具有3个元素。

#foto-container {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

margin: 10px;

}

.foto {

flex: 1 0 21%;

min-height: 50px;

margin: 1px;

background-color: red;

animation: change 4s linear infinite alternate;

}

@keyframes change {

0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}

41%,59% {background:red;}

60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}

}

<div id="foto-container">

<div class="foto foto1">1</div>

<div class="foto foto2">2</div>

<div class="foto foto3">3</div>

<div class="foto foto4">4</div>

<div class="foto foto5">5</div>

<div class="foto foto6">6</div>

<div class="foto foto7">7</div>

<div class="foto foto8">8</div>

<div class="foto foto9">9</div>

<div class="foto foto1">1</div>

<div class="foto foto2">2</div>

<div class="foto foto3">3</div>

</div>

以上是 如何为flex为0:0 25%的flex项目添加1px的边距? 的全部内容, 来源链接: utcz.com/qa/428522.html

回到顶部