Не могу понять что не правильно!!!
@mixin card-set($items: 1, $indentX: 32px, $indentY: $indentX) {
display: flex;
flex-wrap: wrap;
gap: $indentX $indentY;
& > [class*='__item'] {
flex-basis: calc((100% - $indentY * ($items - 1)) / $items);
}
}
на выходе так:
@media only screen and (min-width: 768px) {
.products__list {
flex-wrap: wrap;
gap: 168px 16px;
display: flex;
}
.products__list>[class*="__item"] {
flex-basis: calc(33.3333% - 10.6667px);
}
}
Hi, in this video Pure CSS Menu Hover Animation - HTML CSS Menu hover
you will learn how to create a nice looking navigation for your website.
Проблема в том, что вы используете умножение в выражении calc(). Умножение выполняется в первую очередь, поэтому сначала рассчитывается выражение $indentY * ($items - 1), которое равно 10.6667px. Затем это значение вычитается из 100%, что дает значение 89.3333%. Наконец, это значение делится на $items, которое равно 1.
Чтобы исправить это, вы должны изменить порядок операций в выражении calc(). Вот как это можно сделать:
flex-basis: calc((100% - (10.6667px * $items)) / $items);
В этом выражении сначала выполняется деление, а затем умножение. Таким образом, выражение будет вычислено следующим образом:
(100% - (10.6667px * $items)) / $items
= (100% - 10.6667px) / $items
= 89.3333% / 1
= 89.3333%
Это даст вам желаемый результат, то есть размер элемента будет равен 89.3333% ширины контейнера.
Вот как будет выглядеть ваш mixin после исправления:
@mixin card-set($items: 1, $indentX: 32px, $indentY: $indentX) {
display: flex;
flex-wrap: wrap;
gap: $indentX $indentY;
& > [class*='__item'] {
flex-basis: calc((100% - (10.6667px * $items)) / $items);
}
}
Вы можете проверить это, изменив значение $items на 2. В этом случае выражение calc() будет вычисляться следующим образом:
(100% - (10.6667px * 2)) / 2
= (100% - 21.3333px) / 2
= 78.6667% / 2
= 39.3333%
Это даст вам ожидаемый размер элемента, равный 39.3333% ширины контейнера.