Нет сомнений в том, что flexbox является эффективным решением для размещения веб-страниц. Однако, прошлые проблемы с поддержкой браузера привели к тому, что многие разработчики мало знали о гибкой компоновке и о ее мощных возможностях. Однако, ссылаясь на caniuse.com , вы можете увидеть, что flexbox теперь поддерживается практически всеми основными браузерами, что делает знание макета обязательным для тех, кто хочет быть в курсе последних событий в веб-разработке.
Поэтому я создал это руководство, чтобы помочь вам лучше познакомиться с flexbox, интегрировав среду Compass CSS. Я буду использовать Compass, чтобы провести вас через различные flex-контейнеры, чтобы показать вам, как flexbox размещает дочерние элементы или flex-элементы по разным осям. Кроме того, я покажу вам, насколько легко он делает этот процесс, поскольку он устраняет необходимость включать те надоедливые префиксы вендоров, которые все еще необходимы для максимально глубокой поддержки браузера.
Однако прежде чем мы начнем, я предоставлю краткий обзор flexbox, чтобы мы полностью понимали различные миксины, которые мы будем использовать, и влияние, которое они оказывают на наш код.
Flexbox объясняется с помощью CSS-хитрости .
Как видите, flexbox состоит из 2 осей — основной оси и поперечной оси. По умолчанию flexbox отображает элементы в строках, которые проходят слева направо вдоль главной оси. С другой стороны, гибкий макет может отображать элементы в столбцах, которые располагаются друг над другом. Ради этой статьи я буду иметь дело только с flex-контейнерами и с тем, как ими можно манипулировать. На протяжении всего руководства вы можете ссылаться на документацию Compass на flexbox , в которой содержится информация о миксинах , которые я расскажу.
display-flex() Mixin
Во-первых, давайте посмотрим на мой первоначальный пример, который показывает базовый flex-контейнер с четырьмя flex-элементами. Flexbox — это новая функция в CSS, поэтому нам нужно импортировать библиотеку compass/css3 , чтобы использовать миксины flexbox от Compass. После того, как я импортировал библиотеку, все, что мне нужно сделать, это включить mixin display-flex() для определения flex-контейнера. В результате у меня теперь будет flex-контейнер с элементами, которые бегут слева направо, и уменьшаются по мере уменьшения области просмотра.
.flex-container { @include display-flex(); // flex is the default value }
flex-wrap() Mixin
Если вы сузите область просмотра в демонстрационном примере выше, во флекс-контейнере не хватит места, а внизу появится полоса прокрутки. Я могу использовать несколько методов, чтобы бороться с этим. В следующем примере я собираюсь использовать flex-wrap чтобы сделать элементы в этой оболочке flex-контейнера (т.е. перейти к следующей строке), когда размер области просмотра уменьшается.
.flex-container { @include display-flex(); @include flex-wrap(wrap); }
Как вы можете видеть, .flex-container правил .flex-container теперь включает в себя .flex-container flex-wrap() , который заставляет flex-элементы .flex-container друг на друга, когда у них заканчивается пространство внутри области просмотра. Кроме того, этот миксин может принимать значения nowrap и wrap-reverse . nowrap — это значение по умолчанию для flex-контейнеров, а wrap-reverse обратит порядок, в котором элементы складываются.
Изучив приведенный ниже пример, вы увидите, что используется wrap-reverse :
.flex-container { @include display-flex(); @include flex-wrap(wrap-reverse); }
flex-direction() Mixin
По умолчанию flexbox автоматически отображает flex-контейнеры в виде строк. Поэтому мне не нужно было определять свойство flex-direction в первых двух. Если бы вместо этого мы хотели отобразить flex-элементы, расположенные друг над другом, мне просто нужно передать значение column в mixin flex-direction() Compass.
.flex-container { @include display-flex(); } .flex-container:nth-of-type(2n) { @include display-flex(); @include flex-direction(column); }
flex-flow() Mixin
Следующий пример, который я собираюсь обсудить, продемонстрирует, как создавать flex-контейнеры, используя сокращенный метод. Более того, я могу комбинировать свойства flex-direction и flex-wrap и передавать эти значения в mixin flex-flow . Ниже вы можете увидеть, как этот миксин используется для создания гибкой строки, которая будет работать справа налево. В результате элементы будут складываться сверху вниз, потому что значение wrap-reverse переноса передается в миксин.
.flex-container { @include display-flex(); @include flex-flow(row wrap-reverse); @include align-items(space-between); }
Использование flex-direction() для управления главной и поперечной осями
Как я уже говорил ранее, главная и поперечная оси настолько важны для понимания работы flex-container. Чтобы лучше разграничить это, я собираюсь передать значения для row-reverse column-reverse flex-direction() .
.flex-container { @include display-flex(); @include flex-direction(row-reverse); @include flex-wrap(wrap); } .flex-container:nth-of-type(2n) { @include display-flex(); @include flex-direction(column-reverse); }
При этом мой flex-контейнер отображает элементы в обратном порядке. Вы уже видели, что главная ось отображает элементы слева направо; однако мы изменили это поведение, чтобы создать flex-контейнер, который запускается справа налево. Кроме того, flex-элементы в этом ряду будут перенесены в правую часть страницы. Это результат того, что наша главная ось начинается в правой части страницы.
Кроме того, вы видите то же самое, что происходит с поперечной осью в макете столбца. Как вы уже знаете, значение column будет размещать элементы сверху вниз, однако значение column-reverse переворачивает эту ось и дает нам результат, показанный выше. Продолжая изучать flexbox, вы увидите, что знание того, как работают эти оси, чрезвычайно полезно для полного контроля над элементами в flex-контейнере.
The justify-content() Mixin
В нашем следующем примере я собираюсь проверить mixin’s justify-content() mixin, который используется для выравнивания элементов вдоль главной оси. Демонстрация ниже показывает еще один пример того, как мы можем изменить начальную и конечную точки осей в flexbox.
.flex-container { @include display-flex(); @include flex-flow(row-reverse wrap); @include justify-content(flex-end); } .flex-container-2 { @include display-flex(); @include flex-flow(row wrap); @include justify-content(flex-end); }
Посмотрев на первый flex-контейнер, мы увидим, что я передал значение row-reverse в mixin flex-flow() . В результате он будет работать слева направо, что влияет на значение flex-end . Более того, он сообщает всем элементам этого flex-контейнера, что основная ось заканчивается в левой части страницы, что, как мы знаем, не соответствует макету flexbox по умолчанию.
Во втором примере мы видим типичный flex-контейнер, аналогичный тому, что был в нашем первом примере. Значение flex-end было передано в mixin justify-content() для обоих flex-контейнеров, однако наш второй блок показывает, как это значение flex-end должно работать. В результате все flex-элементы в этом примере сдвинуты как можно дальше вправо. В конце концов, конец главной оси является самой правой стороной страницы, так что это должно иметь смысл для нас.
Продолжая, давайте кратко рассмотрим некоторые другие значения, которые можно передать в этот миксин. В предыдущей демонстрации я удалил один из flex-элементов, чтобы лучше показать, как эти значения отличаются друг от друга.
Первая часть связки будет иметь значение center , которое, как вы уже догадались, будет центрировать изогнутые элементы вдоль главной оси. Далее мы видим как значения space-between , так и space-around , используемые для определения наших оставшихся flex-контейнеров. Во втором flex-контейнере мы видим, что значение space-between -ween прикрепляет первый flex-элемент к началу оси, и оно также прикрепляет последний flex-элемент к концу этой оси. Любое оставшееся пространство будет распределено между оставшимися flex-элементами. В этом случае наш второй флекс-предмет — одинокий волк, поэтому он получает много передышки, так как ему не нужно делить это пространство с другими предметами.
Последний flex-контейнер использует значение space-between . При реализации это значение будет равномерно распределять любое дополнительное пространство в flex-контейнере между двумя смежными flex-элементами. Важно отметить, что первый и последний flex-элементы получат только половину этого пространства на стороне, ближайшей к контейнеру.
align-items() миксин
Последний миксин, на который мы пойдем, это метод компасов align-items() . Принимая во внимание, что align-content() выравнивает flex-элементы вдоль главной оси, align-items выравнивает flex-элементы относительно поперечной оси. В свою очередь, наши гибкие элементы будут смещаться вверх или вниз, в отличие от правого или левого. Мы должны отметить, что этот flex-контейнер имеет максимальную ширину 1000 пикселей, поэтому мы можем увидеть это в действии при изменении размера области просмотра.
$flex-container-width: 1000px; .flex-container { max-width: $flex-container-width; @include display-flex(); @include flex-flow(row nowrap); @include align-items(flex-start); } .flex-container-2 { max-width: $flex-container-width; @include display-flex(); @include flex-flow(row nowrap); @include align-items(flex-end); }
В первом примере мы видим два flex-контейнера. Все элементы в первом контейнере выровнены с использованием значения flex-start . В результате этого все flex-элементы тянутся к началу этой поперечной оси, которая, как мы знаем, начинается в верхней части контейнера. Кроме того, мы можем видеть, что значение flex-end отрицательно влияет на наш гибкий контейнер и вытягивает все гибкие элементы к нижней части поперечной оси.
$flex-container-width: 1000px; .flex-container { max-width: $flex-container-width; @include display-flex(); @include flex-flow(row nowrap); @include align-items(center); } .flex-container-2 { max-width: $flex-container-width; @include display-flex(); @include flex-flow(row nowrap); @include align-items(baseline); } .flex-container-3 { max-width: $flex-container-width; @include display-flex(); @include flex-flow(row nowrap); @include align-items(stretch); }
Выше мы видим оставшиеся значения center , baseline и stretch передаваемые в разные flex-контейнеры. Мы знаем, что mixin align-items() выравнивает элементы вдоль поперечной оси, поэтому должно быть легко понять, почему мы видим такие результаты выше. В верхней части нашего примера все flex-элементы центрированы на поперечной оси, отсюда и название значения. Далее мы видим, что flex-контейнер раскладывает элементы в соответствии с базовой линией каждого flex-элемента. Наш миксин принимает значение stretch и, таким образом, растягивает каждый изгибаемый элемент так, чтобы в этом контейнере не было ни одного изгибаемых элементов.
Последние мысли
На этом я заканчиваю свою статью о создании flex-контейнеров с помощью фреймворка Compass CSS К настоящему времени, я надеюсь, вы понимаете многие миксины, которые Compass предоставляет для определения гибких макетов. Я призываю вас использовать приведенные выше примеры и изменять их по своему усмотрению, поскольку это определенно поможет вам лучше освоить flexbox.