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

Posted 2023-03-05

【中文标题】如何为 flex: 0 0 25% 的 flex 项目添加 1px 边距？

【英文标题】：How to add 1px margin to a flex item that is flex: 0 0 25%?

【发布时间】：2021-10-27 11:19:21

【问题描述】：

我正在使用 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>

谢谢，

【问题讨论】：

试试calc(25% - 1px)

【参考方案1】：

例如，您可以使用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>

【参考方案2】：

这可以通过 flex 实现，如本文的another answer 所示。

您的问题也包含在这篇文章中：Flexbox: 4 items per row

不过，如果您有兴趣，还有一个更简单的 CSS Grid 解决方案。

#foto-container 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  margin: 10px;


.foto 
  min-height: 200px;
  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>

【参考方案3】：

你可以使用 calc 方法来解决这个问题 flex: calc(33.33% - 5%);

.digit-grid 
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;


.box 
    flex: calc(33.33% - 5%);
    margin: 5px 5px;
    background: gray;
    height: 50px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

html 在这里

<div class="digit-grid">
   <div class="box box1">1</div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>
   <div class="box box4">4</div>
   <div class="box box5">5</div>
   <div class="box box6">6</div>
   <div class="box box7">7</div>
   <div class="box box8">8</div>
   <div class="box box9">9</div>
   <div class="box box10">10</div>
   <div class="box box11">11</div>
   <div class="box box12">12</div>
</div>