Как 3 современных инструмента используют сетки Flexbox

Существует множество ценных ресурсов (статьи, учебные пособия и онлайн-инструменты), посвященных обсуждению модуля макета flexbox . Flexbox приобрел настолько большую популярность, что все больше и больше гридов и фреймворков поддерживают эту мощную функцию компоновки.

В этой статье мы рассмотрим, как 3 инструмента включают сетки на основе flexbox, и я покажу вам несколько демонстраций, которые проиллюстрируют функции.

Примечание. В этой статье предполагается, что вы обладаете некоторыми знаниями о flexbox.

Flexbox Grid

Flexbox Grid — это сеточная система, построенная поверх flexbox. Если вы знакомы с Bootstrap , эта сетка использует те же предопределенные классы сетки и точки останова медиазапроса. Следующая таблица суммирует, как работает сетка:

Чтобы начать работу с Flexbox Grid, вы должны установить и включить необходимый CSS-файл (например, flexboxgrid.css ) в свои проекты. Более подробная информация об этом процессе доступна на странице проекта GitHub .

Давайте теперь создадим адаптивное меню навигации на основе этой сетки. Вот что мы собираемся построить:

Сначала мы определяем элемент ul как гибкий контейнер, назначая ему класс row . Затем мы используем класс col-xs-2 для указания ширины гибких элементов. Этот класс гарантирует, что максимальная ширина элементов списка будет равна 16.667% для всех устройств. Наконец, мы центрируем наши элементы по горизонтали и вертикали, добавляя классы center-xs и middle-xs к flex-оболочке.

Ниже приведен обязательный HTML:

 <nav> <ul class="row center-xs middle-xs"> <li class="col-xs-2"> <a href="#">Home</a> </li> <li class="col-xs-2"> <a href="#">About</a> </li> <!-- more list items here... --> </ul> </nav> 

А вот несколько стилей CSS для улучшения внешнего вида нашего меню:

 .row { height: 80px; } ul a:before { font-family: FontAwesome; font-size: 22px; } ul li:nth-child(1) a:before { content: '\f015'; } @media screen and (max-width: 800px) { ul a { font-size: 0; } ul a:before { font-size: 32px; } } 

Примечание. Для простоты я включил только некоторые правила из соответствующего файла CSS.

 <div class="row center-xs middle-xs"> <div class="col-sm-2 col-xs-4"> <h1> <a href="#">My Logo</a> </h1> </div> <div class="col-sm-8 col-sm-offset-2 col-xs-12"> <nav> <ul> <li class="col-xs"> <a href="#">Home</a> </li> <!-- more list items here... --> </ul> </nav> </div> </div><!-- end of .row ... --> 

 <div data-uk-slideshow> <ul class="uk-slideshow uk-slideshow-fullscreen"> <li> <img src="https://download.unsplash.com/photo-1414446483597-8d8f792bfe39"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> <div class="caption"> <h3>Example 1</h3> <!-- more content here --> </div> </div> </li> <!-- more list items here ---> </ul><!-- end of slideshows list ---> <ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center"> <li data-uk-slideshow-item="0"> <a href="#"></a> </li> <li data-uk-slideshow-item="1"> <a href="#"></a> </li> <li data-uk-slideshow-item="2"> <a href="#"></a> </li> <li data-uk-slideshow-item="3"> <a href="#"></a> </li> </ul><!-- end of dotnavs list ---> </div> 

 <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle"> <div class="caption"> <h3>UIkit Framework</h3> <!-- more content here --> </div> </div> 

 <section> <div class="box box1" data-content="Box2"> <h3>Box1</h3> </div> <div class="box box2" data-content="Box4"> <h3>Box3</h3> </div> <div class="box box3"> <h3>Box5</h3> </div> </section> 

 section { @include flexbox; @include flex-direction(column); .box { width: 20%; height: 100px; position: relative; &:after { display: block; position: absolute; top: 50%; right: -100%; width: 100%; height: 100%; } } .box1 { @include align-self(flex-start); &:after { content: attr(data-content); } } .box2 { @include align-self(center); &:after { content: attr(data-content); } } .box3 { @include align-self(flex-end); } @media screen and (max-width: 500px) { .box { width: 100%; } &:after { top: 100%; right: 0; } } }