Как добавить 1px запас к элементу flex, который является flex: 0 0 25%?

Question

Я тестирую несколько разных макетов с помощью flexbox, и у меня возникает следующая проблема.

У меня есть галерея изображений с настроенными элементами Flex 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>

Спасибо,

Answer 1

Это возможно с помощью flex, как показано в другой ответ на этот пост.

Ваш вопрос также рассматривается в этом сообщении: Flexbox: 4 элемента в строке

Однако есть еще более простое решение с помощью 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>

Answer 2

Вы можете использовать метод 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>

Answer 3

Например, вы можете использовать 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>