Что такое main axis

Flexbox

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

Необходимые навыки:	HTML основы (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS).
Цель:	Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.

Почему Flexbox?

Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.

С их помощью сложно или невозможно достичь следующих простых требований к макету:

• Вертикального выравнивания блока внутри родителя.
• Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
• Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.

Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!

Разберём простой пример

В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — flexbox0.html с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.

Определяем, какие элементы разместить в виде flex блоков

Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение display в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы , поэтому мы устанавливаем это значение на (который становится flex контейнером):

section  display: flex; > 

В результате у нас получится вот так:

Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.

Примечание: вы также можете установить значение display inline-flex , если хотите расставить inline элементы как flex блоки.

Внутри flex модели

Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:

• Главная ось (main axis) проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются main start и main end.
• Поперечная ось (cross axis) проходит перпендикулярно Flex элементам. Начало и конец этой оси называются cross start and cross end.
• Родительский элемент, на который назначено свойство display: flex ( в нашем примере) называется flex container.
• Элементы, размещённые в нём как Flex блоки называются flex items (в нашем примере это ).

Запомните эти термины, они пригодятся вам в последующих разделах.

Столбцы или строки?

В Flexbox есть свойство под названием flex-direction , которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение row , т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).

Попробуйте добавить следующую строчку в ваш файл:

flex-direction: column; 

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

Примечание: вы можете также располагать flex элементы в обратном направлении, используя значения row-reverse и column-reverse . Попробуйте их тоже!

Перенос строк

Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: flexbox-wrap0.html и посмотрите его вживую (сохраните его себе на компьютер, если хотите изучить этот пример):

Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить — добавить следующее свойство в CSS-правило для :

flex-wrap: wrap; 

Также добавьте следующее свойство в CSS-правило для :

flex: 200px; 

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

Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство flex: 200px , установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.

Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства flex-direction на row-reverse — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.

flex-flow сокращение

На этом этапе нужно заметить, что существует сокращение для свойств flex-direction и flex-wrap — flex-flow . Например, вы можете заменить

flex-direction: row; flex-wrap: wrap; 

flex-flow: row wrap; 

Гибкое изменение размеров flex элементов

Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).

Прежде всего, добавим следующее правило в конец вашего CSS кода:

article  flex: 1; > 

Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.

Теперь добавьте следующее правило в строку после предыдущего:

article:nth-of-type(3)  flex: 2; > 

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

article  flex: 1 200px; > article:nth-of-type(3)  flex: 2 200px; > 

Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.

Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент , макет будет и дальше выглядеть также хорошо.

flex: краткий код против развёрнутого

flex это сокращённое свойство, в которым можно задать до трёх разных свойств:

• Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства flex-grow .
• Следующее значение пропорции — flex-shrink — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
• Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства flex-basis .

Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.

Горизонтальное и вертикальное выравнивание

Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.

Сначала сделайте себе копию этого примера.

Теперь добавьте следующую строку в низ кода CSS:

div  display: flex; align-items: center; justify-content: space-around; > 

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

align-items контролирует, где на поперечной оси находятся flex элементы.

• По умолчанию стоит значение stretch , которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
• Значение center , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
• Также есть значения flex-start и flex-end , которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее align-items .

Вы можете переопределить align-items поведение для отдельных flex элементов, применив свойство align-self к ним. Например, попробуйте добавить эти строки в код:

button:first-child  align-self: flex-end; > 

Посмотрите, что произошло и удалите эти строки.

justify-content контролирует, где flex элементы располагаются на главной оси.

• По умолчанию стоит значение flex-start , которое располагает все элементы в начале главной оси.
• Также можно использовать flex-end , чтобы расположить их в конце.
• center — также одно из значений justify-content , располагает все элементы по центру главной оси.
• Значение, которое мы использовали выше, space-around , весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
• И ещё одно значение, space-between , которое очень похоже на space-around, за исключением того, что оно не оставляет места на обоих концах.

Попробуйте немного поиграть с этими значениями прежде чем продолжить

Порядок элементов flex

В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.

Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:

button:first-child  order: 1; > 

и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:

• По умолчанию все элементы flex имеют значение order равное 0.
• Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.
• Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
• Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.

Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:

button:last-child  order: -1; > 

Вложенные flex блоки

Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на complex-flexbox.html (см. вживую).

HTML для этого довольно простой. У нас есть элемент , содержащий три . Третий содержит ещё три .

section - article article article - div - button div button div button button button

Давайте посмотрим на код, который мы использовали для макета.

Прежде всего, мы устанавливаем дочерние элементы в виде flex блоков.

section  display: flex; > 

article  flex: 1 200px; > article:nth-of-type(3)  flex: 3 200px; display: flex; flex-flow: column; > 

article:nth-of-type(3) div:first-child  flex: 1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; > 

Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.

button  flex: 1 auto; margin: 5px; font-size: 18px; line-height: 1.5; > 

Подытожим

Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS — grid-системы.

Главная ось

Главная ось в flexbox определяется направлением, установленным в свойстве flex-direction . Это свойство может принимать одно из четырёх значений:

• row
• row-reverse
• column
• column-reverse

Если вы выберите row или row-reverse , то главная ось будет проходить вдоль направления строк.

Выберите column или column-reverse , и главная ось будет проходить сверху вниз в направлении блоков.

На главной оси вы можете контролировать размеры flex элементов, добавляя к ним свободное пространство с помощью свойства flex на самих элементах. Также, вы можете контролировать пространство между и вокруг элементов свойством justify-content .

Узнать больше

Связанные свойства

Дальнейшее чтение

• CSS Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Aligning items in a flex container
• CSS Flexbox Guide: Controlling Ratios of flex items along the main axis (en-US)

Flexbox

Flexbox — это общее название для модуля Flexible Box Layout , который имеется в CSS3. Данный модуль определяет особый режим компоновки/верстки пользовательского интерфейса, который называется flex layout . В этом плане Flexbox предоставляет иной подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки. Развернутое описание стандарта по модулю можно посмотреть в спецификации.

Благодаря Flexbox проще создавать сложные, комплексные интерфейсы, где мы с легкостью можем переопределять направление и выравнивание элементов, создавать адаптивные табличные представления. Кроме того, Flexbox довольно прост в использовании. Единственная проблема, которая может возникнуть при его применении, — это кроссбраузерность. Например, в Internet Explorer поддержка Flexbox и то частичная появилась только в последней версии — IE11. В то же время все современные браузеры, в том числе Microsoft Edge, Opera, Google Chrome, Safari, Firefox, имеют полную поддержку данного модуля.

Основными составляющими компоновки flexbox являются flex-контейнер (flex container) и flex-элементы (flex items). Flex container представляет некоторый элемент, внутри которого размещены flex-элементы.

Основные понятия

Прежде чем переходить к изучению верстки flexbox, стоит рассмотреть некоторые основные понятия.

Одно из ключевых понятий представляет main axis или центральная ось. Это условная ось во flex-контейнере, вдоль которой позиционируются flex-элементы.

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

Термины main start и main end описывают соответственно начало и конец центральной оси, а расстояние между между ними обозначается как main size .

Кроме основной оси существует также поперечная ось или cross axis . Она перпендикулярна основной. При расположении элементов в виде строки cross axis направлена сверху вниз, а при расположении в виде столбца она направлена слева направо. Начало поперечной оси обозначается как cross start , а ее конец — как cross end . Расстояние между ними описывается термином cross size .

То есть, если элементы располагаются в строку, то main size будет представлять ширину контейнера или элементов, а cross size — их высоту. Если же элементы располагаются в столбик, то, наоборот, main size представляет высоту контейнера и элементов, а cross size — их ширину.

Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: flex или inline-flex .

Создадим простейшую веб-страницу, которая применяет flexbox:

     .flex-container < display: flex; >.flex-item < text-align:center; font-size: 1.1em; padding: 1.5em; color: white; >.color1 .color2 .color3  
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
   

Для контейнера flex-container установлено свойство display:flex . В нем располагается три flex-элемента.

Если значение flex определяет контейнер как блочный элемент, то значение inline-flex определяет элемент как строчный (inline). Рассмотрим оба способа на примере:

     .flex-container < display: flex; border:2px solid #ccc; >.inline-flex-container < display: inline-flex; border:2px solid #ccc; margin-top:10px; >.flex-item < text-align:center; font-size: 1.1em; padding: 1.5em; color: white; >.color1 .color2 .color3  
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
   

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

Перевод «A main axis» на русский

The distinctive layout of these sites, created using a uniform plan based on the symmetrical arrangement of the buildings on both sides of a main axis, gave rise to their name — settlements with a symmetrical layout.

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

On a main axis stretching from an entrance portal into the depth of a garden, was placed a dwelling building that was a major high and monumental dominant of charbag.

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

The Versailles palace is built along a main axis
Версальский дворец построен вдоль главной оси

A main axis of the actions promoted is the enhancement of the participation of women in employment and combating women’s unemployment, through programmes of placing women at work positions, reinforcing women’s entrepreneurship as well as helping women to obtain work experience.

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

In the context of the continuing United Nations reform, the move towards a greener and paperless administration by relying more on electronic formats and the use of digital signatures constitutes a main axis for modernizing administrative processes.

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

Возможно неприемлемое содержание

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