[Из песочницы] Flexbox на примере игрального кубика

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

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

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

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

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

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

.firtst-face это flexbox контейнер .first-face { display: flex; }

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

3e94e44baa8647e38c0b317c721ce9ac.png

Сейчас

.first-face

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

justify-content

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

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

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

Свойства

align-items

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

, как и ранее. .first-face { display: flex; justify-content: center; align-items: center; }

0d5dcae6f48d4590bd835492be8bc3d3.png

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

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

.second-face { display: flex; } 899c13df25de44cc961ccf5772506f0e.pngТеперь у нас есть две точки рядом друг с другом. На сей раз впритык, мы хотим, чтобы точки располагались на противоположных сторонах грани. Есть специально значение для 

justify-content

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

.Свойство

space-between

равномерно заполняет пространство между flex элементами. Поскольку есть только две точки, оно отталкивает их друг от друга. .second-face { display: flex; justify-content: space-between; } 299e6139cd2f438cb1b24e066ca432f0.pngВот где мы столкнулись с проблемой. В отличие от предыдущего случая, мы не можем использовать

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; } 5631a93ccfef4fb2932b2b1958ec2bec.pngВыглядит хорошо! Горизонтальные и Вертикальные Вложенности Давайте пропустим третью грань и перейдем в четвертой. Она немного сложнее, чем другие, потому что мы должны поддерживать две колонны, каждая с двумя точками.Есть две вещи в flexbox, которые спасут нас: Flex-контейнеры могут иметь контент по вертикали и горизонтали, и Flex контейнеры могут быть вложенными.

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

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

justify-content: space-between

, как мы это делали раньше. .fourth-face { display: flex; justify-content: space-between; } 96f82218d2384878a9a33779d4bf5293.pngДалее нам необходимо сделать так, чтобы столбцы стали flexbox контейнерами. Может показаться, что они уже такие, но помните, что мы еще не установили display: flex. Мы можем использовать свойство

flex-direction

, чтобы задать направление главной оси столбцу. .fourth-face { display: flex; justify-content: space-between; }

.fourth-face .column { display: flex; flex-direction: column; } 96f82218d2384878a9a33779d4bf5293.pngС виду ничего не изменилось, но столбцы теперь 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; } b7d0e99fde47434baebbe9bff829f584.pngЗаключение Мы создали 3 грани, и этих знаний должно хватить, чтобы сделать еще 3.Ссылка на оригинал статьи

© Habrahabr.ru