Позиционирование нижнего элемента во flex контейнере
Друзья, помогите поставить кнопку в нужное место - прижать к низу, а то у меня танцы с бубном пошли, что то упускаю.
.swiper {
padding-top: 70px;
}
.event {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 23px;
background: var(--white);
border-radius: 30px;
}
.calendar__title {
margin-bottom: 40px;
}
.event__img {
width: 100%;
max-height: 300px;
object-fit: cover;
background: #d9d9d9;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.event__content {
padding: 0 52px 36px 52px;
}
.event__title {
font-size: 36px;
}
.event__content {
flex-direction: column;
}
.event__content>data {
display: inline-block;
margin-bottom: 20px;
font-size: 18px;
color: var(--dark-grey);
}
.event__text {
margin-bottom: 66px;
font-size: 16px;}
.event__text>p {
margin-bottom: 10px;
}
.event__btn {
display: inline-block;
margin: auto auto 0 auto;
border: 1px solid var(--red);
border-radius: 20px;
padding: 8px 30px;
color: var(--red);
font-size: 18px;
}
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide event">
<picture>
<img src="img/event-1.jpg" alt="event-1" class="event__img">
</picture>
<div class="event__content flex">
<h3 class="title event__title">Апрель</h3>
<data value="2024">2024</data>
<div class="event__text">
<p class="event__text-p">Фонд «Подари мечту» провёл семинар для школьных психологов Абинского района.</p>
<p class="event__text-p">Встреча на тему «Как помочь школьнику выбрать профессию» прошла по инициативе Департамента образования района на базе школы N30 в посёлке Ахтырском. Спикером мероприятия выступила профориентолог Фонда Инна Валерьевна Гончарова.</p>
</div>
<a href="#" class="event__btn">Открыть</a>
</div>
</div>
<div class="swiper-slide event">
<picture>
<img src="img/event-2.jpg" alt="event-2" class="event__img">
</picture>
<div class="event__content flex">
<h3 class="title event__title">Март</h3>
<data value="2024">2024</data>
<div class="event__text">
<p>В рамках осуществления благотворительным фондом программы — «Я победитель», были вручены гранты педагогам и ученикам победителям муниципального этапа Всероссийской олимпиады школьников.</p>
</div>
<a href="#" class="event__btn">Открыть</a>
</div>
</div>
<div class="swiper-slide event">
<picture>
<img src="img/event-2.jpg" alt="event-2" class="event__img">
</picture>
<div class="event__content">
<h3 class="title event__title">Я победитель</h3>
<data value="2024">Март 2024</data>
<div class="event__text">
<p>В рамках осуществления благотворительным фондом программы — «Я победитель», были вручены гранты педагогам и ученикам победителям муниципального этапа Всероссийской олимпиады школьников.</p>
</div>
<a href="#" class="event__btn">Открыть</a>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Ответы (1 шт):
Автор решения: dimoniXer
→ Ссылка
вопрос решил так: сделал карточки одинаковыми- заменили height: 100% на height : auto у слайдов слайдера ( не совсем понимаю почему в библиотеке указано не auto). a для блока контента Flex : 1