Как нормализовать высоту элемента во флексбоксе?

Question

[Yes It's matrik]

spoiler

Можно как нибудь сделать такую же круглую кнопку, как на второй картинке?
Все 4 товара стоят с помощью флексбокса, а кнопка справа(которая должна быть как на второй картинке), почему-то прижимается к низу бокса своим паддингом. Можно как-то исправить это, чтобы она стала круглой?

spoiler

.button {
    margin: 100px 0 0 90px;
    width: 30px;
    border-radius: 20px;
    padding: 10px;
    background: #E56B6F;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15), 0px 4px 20px rgba(0, 0, 0, 0.1);
}

Comments

[Anonymous]

на codepen.io залей

Answer 1

[Mizutsune]

Так как в вопросе нет ссылки на песочницу, остаётся только догадываться что там, но судя по скринам скорее всего структура блока с карточками такая:

<parent>
   <card></card>
   <card></card>
   <card></card>
   <card></card>
   <button></button>
</parent>

И если у родительского блока установлено display: flex и без изменений свойство align-items, тогда получается такая вот картина:



Это потому что в свойстве align-items по дефолту стоит значение stretch. Можете погуглить об этом и найдете полезную информацию, но во всяком случае вот:

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

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

align-items: center;

Если решать задачу иначе то лучше вынести кнопку за пределы блока с карточками и сверстать нормально, так как скорее всего это слайдер, а в слайдерах обычно навигацию не кладут вместе со слайдами. Это как-то неправильно.

Comments

[Yes It's matrik]

не знаю почему это на внутренний отступ влияет, но это работает.Спасибо