Как уменьшить разрыв между элементами во флексе

Я пытаюсь уменьшить разрыв между моими изображениями, которые расширяются при наведении курсора.

Я хочу, чтобы это выглядело так: ожидание

Но на данный момент это выглядит так: реальность

Что у меня есть на данный момент:

.container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15%;
  height: 100vh;
}

.mask {
  flex: 1;
  clip-path: polygon(40% 0, 60% 0, 30% 100%, 10% 100%);
  transition: 0.2s ease-in;
  gap: 2px;
}

.mask>img {
  width: 100%;
  height: calc(100% - 10vh);
  object-fit: cover;
}

.mask:hover {
  flex: 1 2 5%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

<div class = "container">
  <div class = "mask">
    <img src = "https://picsum.photos/id/22/4434/3729">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/15/2500/1667">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/10/2500/1667">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/3/5000/3333">
  </div>
</div>

Я пробовал играть с полями, используя даже отрицательные значения, но это не кажется правильным.

Рад любому совету, спасибо.

gap ничего не делает с вашими mask div, это для flex-контейнеров. Я не эксперт по CSS, поэтому надеюсь, что у кого-то будет лучшее решение, но я считаю, что вам нужно уменьшить ширину ваших img (и настроить маску clip-path, чтобы компенсировать это) в состоянии без наведения и вернуться до 100% width при наведении.

— 28.04.2023 06:40

Всегда ли изображений будет четыре?

— 28.04.2023 08:49

css flexbox margin

28.04.2023 05:42

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

clip-path не сделает элементы меньше, они все еще здесь, но невидимы. Таким образом, зазор, который вы хотите уменьшить, является фактической шириной элементов.

У меня есть два решения, но оба не идеальны.

Используйте clip-path и измените ширину .mask на flex-basis и flex-grow.

.container {
  --gap: 2px;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15%;
  height: 100vh;
  gap: var(--gap);
}

.mask {
  transition: 0.2s ease-in;
  height: calc(100% - 10vh);
  flex-basis: calc(calc(100% - 3 * var(--gap)) / 4 * 0.6);
  clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
}

.mask>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask:hover {
  flex-grow: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

<div class = "container">
  <div class = "mask">
    <img src = "https://picsum.photos/id/22/4434/3729">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/15/2500/1667">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/10/2500/1667">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/3/5000/3333">
  </div>
</div>

Используйте skewX и избегайте перекрытия .mask на margin. Если рост .container изменится. Вам может понадобиться js для расчета идеальной маржи.

.container {
  --gap: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15%;
  height: 100vh;
  gap: var(--gap);
}

.mask {
  transition: 0.2s ease-in;
  height: calc(100% - 10vh);
  flex-basis: 50px;
  transform: skewX(-10deg);
}

.mask>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask:hover {
  flex-grow: 1;
  margin: 0 40px;
  transform: skewX(0);
}

<div class = "container">
  <div class = "mask">
    <img src = "https://picsum.photos/id/22/4434/3729">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/15/2500/1667">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/10/2500/1667">
  </div>
  <div class = "mask">
    <img src = "https://picsum.photos/id/3/5000/3333">
  </div>
</div>

Большое спасибо @Shuo, вариант 2 на самом деле работает отлично. Не уверен, что здесь разрешено задавать еще один вопрос, но я попытался поместить тег <a> в тег <img>, как обычно, но это в конечном итоге нарушает стиль. Все еще новичок во всем этом, поэтому я не уверен, где я ошибся.

— 29.04.2023 10:36

Это потому, что селектор изображения (.mask>img) не будет работать, если вы обернете <img> элементами без .mask. Вы можете изменить на .mask>a>img или .mask img.

— 29.04.2023 11:32

28.04.2023 08:46