如何为 flex: 0 0 25% 的 flex 项目添加 1px 边距? [英] How to add 1px margin to a flex item that is flex: 0 0 25%?

问题描述

我正在使用 flexbox 测试几种不同的布局，但遇到以下问题.

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

我附上了下面的例子.

#foto-container {显示:弹性；flex-wrap: 包裹;弹性:1；justify-content:空间环绕；边距:10px；}.foto {弹性:0 0 25%；最小高度:200px；背景颜色:红色；}/*---------如何给照片添加1px?-----------------*/

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="样式表"/><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>

谢谢，

解决方案

例如，您可以使用 flex: 1 0 22%.这将允许您的元素由 22% 定义为 flex-basis(因此每行只有 4 个元素)并且它们将增长以填充边距(因为 flex-grow 设置为 1)

#foto-container {显示:弹性；flex-wrap: 包裹;justify-content:空间环绕；边距:10px；}.foto {弹性:1 0 22%；最小高度:50px；边距:1px；背景颜色:红色；}

<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>

flex-basis 的值应该大于 (20% - margin * 2) 并且小于 (25% - margin * 2).第一个值将允许您每行有 5 个元素，因此具有更大的值将使它们成为 4，并且具有比第二个更大的值将使每行的元素数为 3.

#foto-container {显示:弹性；flex-wrap: 包裹;justify-content:空间环绕；边距:10px；}.foto {弹性:1 0 21%；最小高度:50px；边距:1px；背景颜色:红色；动画:改变4s线性无限交替；}@关键帧改变{0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}41%,59% {背景:红色；}60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}}

<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>

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屋！