如何为flex为0:0 25％的flex项目添加1px的边距? [英] How to add 1px margin to a flex item that is flex: 0 0 25%?
问题描述
我正在用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>
I am testing few different layouts with flexbox and I have the following problem.
I have a image gallery with flex items set up flex:0 0 25%; and I would like to add 1px margin to them because 1% is to big. So I was wondering what should I do in this case.
I am attaching the example below.
#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>
Thanks,
You can use flex: 1 0 22% for example. This will allow your element to be defined by 22% as flex-basis (so only 4 elements per row) and they will grow to fill the remaining space left by margin (since flex-grow is set to 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>
The value of flex-basis should be bigger than (20% - margin * 2) and lower than (25% - margin * 2). The first value will allow you to have 5 elements per row, so having a bigger value will make them 4 and having a bigger value than the second one will make the number of element to be 3 per row.
#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的边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
