Верстка портфолио на flexbox (часть 2)
Секция с фотографиями
На секции с портфолио, вы узнаете, как верстать на flexbox. Мы имеем дело с нестандартным расположением фотографий, одна из фотографий в 2 раза больше остальных и занимает двойную высоту. Необходимо создать четыре колонки portfolio_col, в которых будет по два элемента portfolio_item в столбик и только в третьей колонке поместится один элемент portfolio_item с большой фотографией. В каждом portfolio_item имеется фотография portfolio_image.
HTML разметка
<div class="portfolio">
<div class="portfolio_col">
<div class="portfolio_item">
<img class="portfolio_image" src="images/1.jpg" alt="">
</div>
<div class="portfolio_item">
<img class="portfolio_image" src="images/2.jpg" alt="">
</div>
</div>
<div class="portfolio_col">
<div class="portfolio_item">
<img class="portfolio_image" src="images/3.jpg" alt="">
</div>
<div class="portfolio_item">
<img class="portfolio_image" src="images/4.jpg" alt="">
</div>
</div>
<div class="portfolio_col">
<div class="portfolio_item">
<img class="portfolio_image" src="images/5.jpg" alt="">
</div>
</div>
<div class="portfolio_col">
<div class="portfolio_item">
<img class="portfolio_image" src="images/6.jpg" alt="">
</div>
<div class="portfolio_item">
<img class="portfolio_image" src="images/7.jpg" alt="">
</div>
</div>
</div>
Как работает верстка на flexbox?
Для блока с классом portfolio включается flex технология, внутри которого четыре элемента ребенка portfolio_col, ведут себя по новым правилам – располагаются в одной строке. Без flexbox, они складывались бы друг под друга.
/* флекс контейнер */
.portfolio {
display: flex;
}
Каждая колонка занимает одинаковое пространство контейнера.
/* колонка */
.portfolio_col {
width: 25%;
}
/* ячейка внутри колонки */
.portfolio_item {
position: relative;
}
/* фото в ячейке */
.portfolio_image {
display: block;
max-width: 100%;
height: auto;
transition: opacity .2s linear;
}
Адаптивная верстка портфолио на flexbox
На планшетах и тем более на смартфонах, расположение четыре колонки в ряду, начинает напрягать зрение и делает просмотр секции с портфолио не комфортным. Как без особого труда, на планшетах сделать два ряда по две колонки, а на смартфонах оставить по одной колонке в ряду?
Разрешим перенос колонок, в контейнере portfolio, зададим свойство wrap. Для колонки portfolio_col пропишем ширину колонки 50%, чтобы в контейнере осталось только две колонки.
Адаптивность на планшетах
@media (max-width: 770px) {
.section {
padding: 40px 0;
}
.portfolio {
flex-wrap: wrap;
}
.portfolio_col {
flex: none;
width: 50%;
}
}
Адаптивность на смартфонах
Делаем ширину колонки 100%, кроме этого уменьшаем отступы и размер шрифта.
@media (max-width: 575px) {
.section_header {
margin-bottom: 50px;
}
h3 {
font-size: 20px;
}
h2 {
font-size: 24px;
}
h2:after {
margin: 20px auto;
}
.portfolio_col {
width: 100%;
}
}
Заключение
На 2019 год, верстка на flexbox, является наиболее удобным и простым способом верстки для новичков. Кроме того, технология на flexbox поддерживается всеми современными браузерами.
-
Создано 06.05.2019 10:35:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.