/ Дизайн / FlexBlock. Современная верстка

FlexBlock. Современная верстка

HIT

21.07.2017

2205

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке 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;

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Responsive block’s

Responsive block’s

Это эксперимент по складываю блоков при разном разрешении экрана и в различных устройствах. Это очень сырое решение, не рекомендую применять на реальных сайтах. Данное тестирование лучше всего проводить с помощью Читать далее »

Галерея изображений Masonry

Галерея изображений Masonry

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой. Галерея изображений Masonry jquery Вставляем изображения в общий div с классом grid, каждое изображение в Читать далее »

/
Одинаковая высота блоков

Одинаковая высота блоков

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery. Скрипт EqualHeight Скрипт для Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

FlexBlock. Современная верстка
PHP код в записях и страницах
Рекомендации для васPHP код в записях и страницахOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.