Как скрыть flex-элемент, при этом убрать дополнительный gap-отступ?

Когда необходимо скрыть один из flex-элементов без сохранения пространства, занимаемого им в макете, можно использовать свойство display: none; для скрытия элемента. Однако, это приведет к тому, что элемент исчезнет, но ширина и отступы других элементов будут сохранены, что может вызвать проблему с отображением макета.

Для того чтобы скрыть элемент и убрать отступ, который он занимал, можно воспользоваться таким приемом:

1. Используйте свойство visibility: hidden; для скрытия элемента. Это свойство сохраняет местоположение элемента на странице, но делает его невидимым. Однако, отступы остаются.

2. Для того чтобы убрать отступ, добавьте следующие свойства к скрытому элементу:

   visibility: hidden;
   position: absolute;

Это свойство позволит скрыть элемент и изъять его из потока документа, избавившись от отступов, которые он мог бы оставить.

Пример:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item hidden">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    flex: 1;
    margin: 10px;
    padding: 10px;
    background: lightblue;
  }
  .hidden {
    visibility: hidden;
    position: absolute;
  }
</style>

Таким образом, применяя visibility: hidden; и position: absolute;, вы сможете скрыть flex-элемент без дополнительного gap-отступа.