Flexbox на примере игрального кубика

Что если бы вы могли построить сложный css лейаут в считанные минуты? Flexbox — это новый лейаут CSS верстки, который позволяет легко построить динамические макеты. С Flexbox выравнивание по вертикали, блоки с одинаковой высотой, перестановка и направление становится проще простого.

Есть популярный миф, что flex еще не готов к использованию. Но это не так! У 93% людей сейчас запущен браузер, поддерживающий flexbox. Это лучше, чем поддержка для HTML5.

В этой статье я проведу вас через основы flexbox на примере создания игрального кубика. Сейчас мы пропустим некоторые из более сложных тонкостей flexbox, таких как вендорные префиксы, старая версия синтаксиса и браузерные причуды. Рассмотрим их в будущих уроках.

Первая сторона

Кубик состоит из шести граней (сторон). Каждая грань имеет ряд пунктов (точек), которые определяют ценность стороне. Первая сторона состоит из одного пункта по центру.

Давайте начнем с HTML.

Код
<div class="first-face"> <span class="pip"></span> </div>

Чтобы сделать жизнь немного проще, я добавил основные стили для сторон и точек. Вот что получилось:

Сначала нужно сказать браузеру, что

Код
 .firtst-face

это flexbox контейнер

Код
.first-face { display: flex; }

На вид ничего не изменилось, но под капотом поменялось многое.

Сейчас

.first-face

имеет главную ось по горизонтали. Основная ось может быть как вертикально, так и горизонтальной, но по умолчанию она горизонтальная. Если бы мы добавили еще одну точку на сторону, оно бы отображалась справа от первой. Контейнер также имеет вертикальную ось. Вспомогательная ось всегда перпендикулярна к главной оси.

Свойство

justify-content

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

center

Код
.first-face { display: flex; justify-content: center; }

Т.к главной осью является горизонтальная, точка теперь находится по центру родительского элемента.

Свойства

align-items

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

center

, как и ранее.

Код
.first-face { display: flex; justify-content: center; align-items: center; }

Именно так, точка теперь в центре!

Двигаемся дальше

На второй грани кубика первая точно располагается в левом верхнем углу, а вторая — в правом нижнем. Это довольно просто сделать, используя flexbox.

И снова давайте начнем с разметки и базового css:

Код
<div class="second-face"> <span class="pip"></span> <span class="pip"></span> </div>
Код
.second-face { display: flex; }

Теперь у нас есть две точки рядом друг с другом. На сей раз впритык, мы хотим, чтобы точки располагались на противоположных сторонах грани. Есть специально значение для

justify-content

, которое позволит нам сделать это:

space-between

Свойство

space-between

равномерно заполняет пространство между flex элементами. Поскольку есть только две точки, оно отталкивает их друг от друга.

Код
.second-face { display: flex; justify-content: space-between; }

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

align-items

, поскольку это будет влиять на обе точки. К счастью, flexbox включает в себя

align-self

. Это свойство позволяет выравнивать отдельные элементы Flex-контейнера вдоль поперечной оси именно то, чего мы хотели! Значение, которое мы хотим установить для этого свойства- это

flex-end

Код
.second-face { display: flex; justify-content: space-between; } .second-face .pip:nth-of-type(2) { align-self: flex-end; }

Выглядит хорошо!

Горизонтальные и Вертикальные Вложенности

Давайте пропустим третью грань и перейдем в четвертой. Она немного сложнее, чем другие, потому что мы должны поддерживать две колонны, каждая с двумя точками.

Есть две вещи в flexbox, которые спасут нас: Flex-контейнеры могут иметь контент по вертикали и горизонтали, и Flex контейнеры могут быть вложенными.

С этих пор наша разметка будет включать столбцы.

Код
<div class="fourth-face"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div>

Поскольку мы хотим, чтобы два столбца были по разные стороны баррикад, давайте двигаться и использовать

justify-content: space-between

, как мы это делали раньше.

Код
.fourth-face { display: flex; justify-content: space-between; }

Далее нам необходимо сделать так, чтобы столбцы стали flexbox контейнерами. Может показаться, что они уже такие, но помните, что мы еще не установили display: flex. Мы можем использовать свойство

flex-direction

, чтобы задать направление главной оси столбцу.

Код
.fourth-face { display: flex; justify-content: space-between; } .fourth-face .column { display: flex; flex-direction: column; }

С виду ничего не изменилось, но столбцы теперь flex контейнеры. Обратили внимание, как мы воткнули flex контейнер непосредственно во внутрь другого flex контейнера? Это нормально! flexbox не волнует, если контейнеры являются вложенными.

Заключительным этапом является пространство между точками внутри столбцов. Поскольку главная ось вертикальна, мы можем снова использовать

justify-content

Код
.fourth-face { display: flex; justify-content: space-between; } .fourth-face .column { display: flex; flex-direction: column; justify-content: space-between; }

Заключение

Мы создали 3 грани, и этих знаний должно хватить, чтобы сделать еще 3.

2812