Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам новый вид верстки flex блоками. Одними из наиболее значимых преимуществ подобной верстки: выравнивание по вертикали, распределение блоков, изменение направления (row, column), изменение порядка элементов.
Данный вид верстки мне сразу понравился хотя бы потому, что не нужно мудрить костыли типа <!— —> при использовании inline-block.
Что можно делать с FlexBlock
- Менять местами область основного контента и сайтбара для мобильной версии
- Делать определенные элементы привязанными влево, а другие вправо в рамках одной области
- Легко делать прижатый к низу подвал (см. ниже)
Основные свойства FlexBlock
Свойства родительского контейнера
flex-direction — направление, row — по-умолчанию
justify-content — выравнивание блоков по основной оси
align-items — выравнивание блоков по дополнительной оси
flex-wrap — перенос блоков на следующую строку, по-умолчанию nowrap
align-content — выравнивание строк по дополнительной оси
Свойства дочерних блоков
flex-grow — коэффициент расширяемости блока
flex-shrink — коэффициент сужаемости блока
flex-basis — базовый размер блока (к которому будут применены коэффициенты grow и shrink)
align-self — выравнивание блока по дополнительной оси (перекрывает общее значение родителя)
order — порядок элемента (работает, если у других элементов свойство задано)
Прижатый футер с FlexBlock
Данный момент с Flex решается очень просто:
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Интересное CSS свойство 100vh. Это означает 100% высоты экрана. Также есть свойство vw — ширина экрана (viewport)
В IE 11 работает не корректно, даже если заменить в body min-height: 100vh; на height: 100vh;
Трансформация таблиц
С помощью свойства display: flex; можно переделать таблицу. Это особенно актуально в мобильной версии сайта, когда таблица начинает не помещаться.
.shop_attributes td, .shop_attributes th {
display: flex;
flex-wrap: wrap;
width: 100%;
}
Masonry с FlexBlock
Выводим блоки (можно с надписями):
<div class="flex-masonry"> <div><a href="/"><p>Туфли</p><img src="/wp-content/uploads/2018/01/tufli.jpg" alt="Masonry Brick #2"></a></div> <div><a href="/"><p>Сандалии</p><img src="/wp-content/uploads/2018/01/sandalii.jpg" alt="Masonry Brick #3"></a></div> <div><a href="/product-category/demisezonnaya-obuv/"><p>Демисезонная обувь</p><img src="/wp-content/uploads/2018/01/demisezonnaya-obuv.jpg" alt="Демисезонная обувь"></a></div> <div><a href="/product-category/mokasiny/"><p>Макасины, слипоны, кеды</p><img src="/wp-content/uploads/2018/01/makasinysliponykedy.jpg" alt="Макасины, слипоны, кеды"></a></div> <div><a href="/product-category/krossovki/"><p>Кроссовки</p><img src="/wp-content/uploads/2018/01/krossovki.jpg" alt="Кроссовки"></a></div> <div><a href="/product-category/zimnyaya-obuv/"><p>Зимняя обувь</p><img src="/wp-content/uploads/2018/01/zimnyaya-obuv.jpg" alt="Зимняя обувь"></a></div> <div style="height: 400px;"><a href="/product-category/tufli-shkolnaya-obuv/"><p>Школьная обувь</p><img src="/wp-content/uploads/2018/01/shkola.jpg" alt="Школьная обувь"></a></div> <div style="height: 400px;"><a href="/"><p>На первый шаг</p><img src="/wp-content/uploads/2018/01/na-pervyj-shag.jpg" alt="Masonry Brick #4"></a></div> </div>
Стили Masonry на основе FlexBlock
.flex-masonry {
display: flex;
flex-flow: row wrap;
margin-right: -8px; /* компенсация пробела между блоками */
margin-bottom: 30px;
padding-top: 10px;
}
.flex-masonry > div {
flex: auto;
height: 500px;
width: 25%;
margin: 0 8px 8px 0; /* пробелы между блоками */
overflow: hidden;
position: relative;
}
.flex-masonry div img {
object-fit: cover;
width: 100%;
height: 100%;
filter: brightness(75%);
-o-transition: all 1.0s;
transition: all 1.0s ease;
-webkit-transition: all 1.0s ease 0s;
}
.flex-masonry > div:hover img {filter: brightness(100%); transform: scale(1.2);}
.flex-masonry > div p {
position: absolute;
z-index: 9;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 50px;
font-size: 2rem;
font-weight: 600;
color: #fff;
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
opacity: 0;
-o-transition: all 1.0s;
transition: all 1.0s ease;
-webkit-transition: all 1.0s ease 0s;
}
.flex-masonry > div:hover p {opacity: 1;}
Центровка элемента по горизонтали внутри flex
Я пытался прижать к правому краю блок внутри flex с помощью свойства justify-self: flex-end; но тщетно. В этом случае, для подобного элемента, нужно использовать свойство margin-left: auto;
[site-socialshare]
