Почему чекбокс расширается со другим?

EnGold, так далеко хрустальный шарик не работает.

Оформите код с видимой проблемой в песочницу на codepen.io.
И опишите и/или покажите скрином/видео, какого результат хотите добиться.

Почему чекбокс расширается со другим?

EnGold, задать другой, подходящий, align-items не вариант?

Почему swiper выводит все itemы?

an,

но почему все itemы разворачиваются?

Я даже не знаю, что вы имеете в виду под этой фразой.

Почему чекбокс расширается со другим?

Очень "мудро" с вашей стороны не показать стили родителя.
А хрустальный шарик говорит, что родитель либо флекс либо грид у которых align-items: stretch

Почему swiper выводит все itemы?

an, как-то разобраться с дизайнером или высотой в относительных единицах измерения.
Есть пропорции, calc и т.д.

Ведь текст у вас и по дизайну не может быть бесконечным. Ведь слайдер должен весь целиком помещаться в высоту страницы (в свободное от шапки и других деталек место)

Как обрезать углы у блока?

При однотонном фоне углы делаются градиентами, а скругления с помощью border-radius.

Почему swiper выводит все itemы?

Самая частая ошибка в свайпере в несколько рядов - это забытая высота обертки и/или детей.

Как сделать центральный слайд больше?

an, ну и причем тут тогда свайпер и формулировка вашего вопроса?

Переформулируйте вопрос, смените теги на актуальные, укажите cms или что там у вас.

Как сделать центральный слайд больше?

https://qna.habr.com/q/1200296

Как сверстать правильно столько блоков?

Вот какой-то древний пример на jsfiddle (в России нужен VPN, но мне лениво переделывать на codepen)
canvas https://jsfiddle.net/Ankhena/mkf6h0zp/
gradient https://jsfiddle.net/Ankhena/0phh2of9/

Как сверстать правильно столько блоков?

Судя по тому как они обрезаются по краям, это вообще не блоки.
А либо фон (градиентиками) либо сетка на canvas.

Как сделать кнопки в виде квадратиков и списка?

Sergei Nazarenko,

или ошибку выдаёт.

Именно это оно и делает. Откройте валидатор.

Нельзя это когда ты сделал и оно не работает

Нет гарантии, что все браузеры будут одинаково обрабатывать невалидный код.

Есть ли возможность переноса макета с Figma в Joomla?

Я бы рекомендовала всё таки нанять верстальщика или купить готовый сверстанный макет и внести в него свои корректировки. Всё таки вы магазин делаете, а не лендосик.

Как сделать кнопки в виде квадратиков и списка?

Обратите внимание на то, что div нельзя вкладывать ни в span ни в button.

Как изменить позиции блока и pagination в Swiper.js?

2. Какие свойства надо изменить, что бы иконка человека чуть выходила из-за блока и не обрезалась?

Либо padding либо и паддинг и позиционировать относительно текста, а не слайда.

3. Какие свойства задать пагинации что бы она была ниже блока и не обрезалась?

Вынуть её из блока с overflow и позиционировать как хочется.

Как растянуть дочерние блоки на фиксированную высоту блока родителя?

pashjka, вам поможет:
1. max-height для ограничения высоты блока и картинки
2. overflow для включения прокрутки для текста (или скрытия его вовсе), когда он выпадет из блока.
3. flex-grow, чтобы растянуть блок с текстом на всю оставшуюся от картинки высоту (альтернатива единицы fr у грида)
4. object-fit для вписывания картинки в блок
5. aspect-ratio или хак с паддингом (гуглится) для пропорций
6. flex-direction: column, если вы вообще про него забыли (это так, на всякий пожарный).

Ну а теперь показывайте, что вы делали и что не получилось на codepen.io так, чтобы была видна проблема.

Как растянуть дочерние блоки на фиксированную высоту блока родителя?

А если текста больше чем на 300px, куда должны деваться излишки и что должно происходить с картинкой?

Вообще это больше проблемы с геометрией, а не с флексами.

Как только вы поймете геометрию, останется переписать это на css. (Можно на гриды, будет удобнее)

Как в flexbox сделать карточки гибкими в row как в grid?

Speakermen, вы задали flex-basis 25%. 4х25% это уже 100%, а вы ещё хотите отступы.
Вам нужен calc
типа calc(25% - 24px*3/4);

Но я бы, конечно, гридами, потому что вообще не будет проблем с пересчетами при изменениях размеров.

Как в flexbox сделать карточки гибкими в row как в grid?

Speakermen, гридами это делать заметно проще.
Флексами вам будет нужен calc для ширины (или basis).

Оформите песочницу с видимой проблемой на codepen.io

Как сделать, что бы текст не "Улетал" от чекбокса?

Nik Faraday, начните с изготовления песочницы на codepen.io с текущим кодом и видимой проблемой.
Сюда ссылку и позовите.