Flexbox вертикальное выравнивание: Выравнивание элементов во Flex контейнере — Веб-технологии для разработчиков

Выравнивание элементов во Flex контейнере — Веб-технологии для разработчиков

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

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content.

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

Свойства управления выравниванием

В этом руководстве рассматриваются следующие свойства:

• justify-content — управляет выравниванием элементов по главной оси.
• align-items — управляет выравниванием элементов по перекрёстной оси.
• align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
• align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Перекрёстная ось

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: stretch
• align-items: baseline

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column.

Выравнивание содержимого по перекрёстной оси — свойство align-content

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

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Выравнивание содержимого по главной оси

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обсуловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content.

• justify-content: flex-start
• justify-content: flex-end
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: stretch
• justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start иflex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Выравнивание и гибкое-направление

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

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl). 

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение  column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   

Использование авто отступов для выравнивания по главной оси

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto. 

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что это юзкейс для свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. 

Будущие функции выравнивания для Flexbox

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Смотрите Также

• Выравнивание Коробки
• Выравнивание Коробки в Flexbox (Гибкая Коробка)
• Выравнивание Коробки в Grid Layout (Макет Сетки)

Всё, что нужно знать о выравнивании во Flexbox / Хабр

Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk.

Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.

В первой статье этого цикла я рассказала, что происходит при объявлении свойства display: flex для элемента. Сейчас рассмотрим свойства выравнивания и как они работают с Flexbox. Если вы когда-либо приходили в замешательство, применить align или justify, надеюсь, эта статья многое прояснит!

История выравнивания во Flexbox

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

Свойства выравнивания теперь полностью определены в спецификации Box Alignment. Она детализирует, как работает выравнивание в различных макетах. Это означает, что в CSS Grid можно использовать те же свойства, что и в Flexbox — а в будущем в других макетах тоже. Поэтому любая новая функция выравнивания Flexbox будет подробно описана в спецификации Box Alignment, а не в следующей версии Flexbox.

Свойства

Многим трудно запомнить, следует ли использовать свойства, которые начинаются с align- или с justify-. Важно помнить следующее:

• justify- выполняет выравнивание по главной оси в том же направлении, что и flex-direction;
• align- выполняет выравнивание по оси поперёк направлению flex-direction.

Здесь действительно помогает мышление с точки зрения главной и поперечной осей, а не горизонтальной и вертикальной. Не имеет значения, как физически направлена ось.

Выравнивание главной оси с помощью justify-content

Начнём с выравнивания по главной оси. Оно осуществляется с помощью свойства justify-content. Данное свойство обрабатывает все элементы как группу и управляет распределением пространства между ними.

Изначальное значение justify-content равняется flex-start. Вот почему при объявлении display: flex все элементы flex выстраиваются в начале строки. В письменности слева направо элементы группируются слева.

Обратите внимание, что свойство justify-content производит видимый эффект только при наличии свободного места. Поэтому если у вас набор элементов занимает всё пространство на главной оси, justify-content ничего не даст.

Если указать для justify-content значение flex-end, то все элементы переместятся в конец строки. Свободное место теперь находится в начале.

С этим пространством можно делать и другие вещи. Например, распределить его между нашими элементами, используя justify-content: space-between. В этом случае первый и последний элемент разместятся на концах контейнера, а всё пространство поровну поделится между элементами.

Мы можем распределить пространство с помощью justify-content: space-around. В этом случае доступное пространство делится на равные части и помещается с каждой стороны элемента.

Новое значение justify-content можно найти в спецификации Box Alignment; оно не указано в спецификации Flexbox. Это значение space-evenly. В этом случае элементы равномерно распределяются в контейнере, а дополнительное пространство поровну распределяется между элементами и с обеих сторон.

Вы можете поиграться со всеми значениями в демо.

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

Выравнивание по осям с помощью align-content

Если в контейнере несколько осей и указано flex-wrap: wrap, то можно использовать align-content для выравнивания строк на поперечной оси. Но требуется дополнительное пространство. В этой демонстрации поперечная ось работает в направлении колонки, и я указала высоту контейнера 60vh. Поскольку это больше, чем необходимо для отображения всех элементов, то появляется свободное пространство по вертикали.

Затем я могу применить align-content с любым из значений.

Если в качестве flex-direction указано column, то align-content работает как в следующем примере.

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

Свойство по place-content

В спецификации Box Alignment можно найти свойство place-content. Использование этого свойства означает, что вы одновременно устанавливаете justify-content и align-content. Первое значение — для align-content, второе для justify-content. Если задано только одно значение, то оно применяется к обоим свойствам:

.container {
    place-content: space-between stretch;
}

Соответствует этому:

.container {
    align-content: space-between; 
    justify-content: stretch;
}

А такой код:

.container {
    place-content: space-between;
}

Равноценен следующему:

.container {
    align-content: space-between; 
    justify-content: space-between;
}

Выравнивание по осям с помощью align-items

Теперь мы знаем, что можно выровнять набор элементов или строки как группу. Тем не менее, есть ещё один способ выровнять элементы по отношению друг к другу на поперечной оси. У контейнера есть высота, которая определяется высотой самого высокого элемента.

Как вариант, её можно определить свойством height в контейнере:

Почему элементы растягиваются до размера самого высокого элемента — это потому что начальным значением параметра align-items является stretch. Элементы растягиваются по поперечной оси до размера контейнера в этом направлении.

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

Кроме начального значения stretch, можно присвоить элементам align-items значение flex-start, в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.

Значение flex-end перемещает их в конец контейнера по поперечной оси.

Если вы используете значение center, то элементы центрируются относительно друг друга:

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

Все эти варианты можно попробовать в демо.

Индивидуальное выравнивание с помощью align-self

Свойство align-items задаёт выравнивание всех элементов одновременно. В действительности оно устанавливает значения align-self для всех элементов группы. Можно также использовать свойство align-self для любого отдельного элемента, чтобы выровнять его внутри строки и относительно других элементов.

В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.

Почему нет justify-self?

Часто возникает вопрос, почему невозможно выровнять один элемент или группу элементов по главной оси. Почему во Flexbox нет свойства -self для выравнивания по главной оси? Если вы представите justify-content и align-content как способ распределения пространства, то ответ становится более очевидным. Мы имеем дело с элементами как с группой и размещаем свободное пространство определённым образом: либо в начале, либо в конце группы, либо между элементами.

Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками. Здесь тоже мы берём группу дорожек — и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.

Использование автоматических полей на основной оси

Если вы когда-нибудь центрировали блок в CSS (например, враппер для контента главной страницы, установив поля слева и справа в auto), то у вас уже есть некоторый опыт работы с автоматическими полями. Значение auto для полей заполняет максимальное пространство в установленном направлении. Для центрирования блока мы устанавливаем и левое, и правое поля в auto: каждое из них пытается занять как можно больше места, и поэтому помещает наш блок в центр.

Автоматические поля очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере показан типичный случай. Есть панель навигации, элементы отображаются в виде строки и используют начальное значение justify-content: start. Я хочу, чтобы последний пункт отображался отдельно от других в конце строки — при условии, что в строке достаточно места для этого.

Берём этот элемент и указываем для свойства margin-left значение auto. Это значит, что поле пытается получить как можно больше места слева от элемента, то есть элемент выталкивается к правой границе.

Если вы используете автоматические поля на главной оси, то justify-content перестанет действовать, так как автоматические поля займут всё пространство, которое в противном случае распределялось бы с помощью justify-content.

Запасное выравнивание

Для каждого метода выравнивания описан запасной вариант — что произойдёт, если заданное выравнивание невозможно. Например, если у вас есть только один элемент в контейнере, а вы указали justify-content: space-between, что должно произойти? В этом случае применяется запасное выравнивание flex-start — один элемент будет выровнен по началу контейнера. В случае justify-content: space-around используется запасное выравнивание center.

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

Безопасное и небезопасное выравнивание

Недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием ключевых слов safe и unsafe.

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

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: unsafe center;
}

.item:last-child {
    width: 200px;
}

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

.container {  
    display: flex;
    flex-direction: column;
    width: 100px;
    align-items: safe center;
}

.item:last-child {
    width: 200px;
}

Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.

Заключение

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

• justify- для основных осей, а align- для поперечных;
• для align-content и justify-content требуется свободное пространство;
• свойства align-content и justify-content применяются к элементам в группе, распределяя пространство между ними. Нельзя указывать выравнивание отдельного элемента, потому что свойство -self отсутствует;
• если хотите выровнять один элемент или разбить группу по основной оси, используйте автоматические поля;
• align-items устанавливает одинаковые свойства align-self для всей группы. Используйте align-self для дочернего элемента группы, чтобы установить ему значение индивидуально.

Вертикальное выравнивание в Flexbox | lets-code

Вопрос на сегодня: вертикальное выравнивание в Flexbox. Не в первый раз уже слышу как мусолят эту тему, так что давайте разберёмся.

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

Для начала накидаем небольшую разметку, возьмём 4 контейнера и разместим там по 3 элемента:

<div>
<div>
<div>Flex item 1</div>
<div>Flex item 1</div>
<div>Flex item 1</div>
</div>

<div>
<div>Flex item 1</div>
<div>Flex item 1</div>
<div>Flex item 1</div>
</div>

<div>
<div>Flex item 1</div>
<div>Flex item 1</div>
<div>Flex item 1</div>
</div>

<div>
<div>Flex item 1</div>
<div>Flex item 1</div>
<div>Flex item 1</div>
</div>
</div>

Далее создаём стили для выравнивания главного контейнера и потомков:

.main-felex-container{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-container{
min-height: 200px;
min-width: 150px;
display: flex;
padding: 5px;
background: lightblue;
border-radius: 2px;
}

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

Для вертикального выравнивания с одинаковыми отступами от родителя сверху и снизу необходимо родительскому блоку добавить свойство justify-content со значением space-around.

Вот, что получим в итоге:

Если необходимо что-бы крайние элементы располагались по краям родителя, без отступов, то указываем: justify-content:space-between;

Кроме того, вы можете выравнивать элементы по левому краю, по правому или по центру при помощи свойства align-items, задавая ему значения flex-start, flex-end и center соответственно.

Так же, есть возможность выравнивать каждый потомок отдельно, не смотря на то, какое свойство указано у родителя. Для этого потомку необходимо добавить свойство align-self, возможные значения свойства совпадают с значениями свойства align-items. Укажем для для родителя align-items:flex-start , для второго потомка align-self: center , а для третьего align-self: flex-end. Вот что получится:

Как видите, ничего сложного в этом нет. Используя свойство margin для конкретного потомка, вы можете регулировать его отступ от остальных. Эти правила действуют не только для вертикального выравнивания, но и для горизонтального. Попробуйте попрактиковаться с этим самостоятельно.

comments powered by HyperComments

CSS3 flexbox — описание всех свойств модуля, примеры верстки

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:

• Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.
• Переопределять порядок отображения элементов.
• Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
• Решать проблему с горизонтальным и вертикальным центрированием.
• Переносить элементы внутри контейнера, не допуская его переполнения.
• Создавать колонки одинаковой высоты.
• Создавать прижатый к низу страницы подвал сайта.

Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.

Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.

Что такое flexbox

Поддержка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

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

Рис. 1. Модель flexbox

Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

Рис. 2. Режим строки и колонки

2. Flex-контейнер

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.

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

.flex-container {
/*генерирует flex-контейнер уровня блока*/
display: -webkit-flex; 
display: flex; 
}
.flex-container {
/*генерирует flex-контейнер уровня строки*/
 display: -webkit-inline-flex;
 display: inline-flex; 
}

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

Рис. 3. Выравнивание элементов в модели flexbox

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

3. Flex-элементы

Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:

• Для flex-элементов блокируется их значение свойства display. Значение display: inline-block; и display: table-cell; вычисляется в display: block;.
• Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
• Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
• Поля margin соседних flex-элементов не схлопываются.
• Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
• margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
• Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

4. Порядок отображения flex-элементов и ориентация

Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).

4.1. Направление главной оси: flex-direction

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

Рис. 4. Свойство flex-direction для left-to-right языков

Синтаксис

.flex-container {
display: -webkit-flex; 
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}

4.2. Управление многострочностью flex-контейнера: flex-wrap

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

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

Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков

Синтаксис

.flex-container {
display: -webkit-flex; 
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}

4.3. Краткая запись направления и многострочности: flex-flow

Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;. свойство не наследуется.

Синтаксис

.flex-container {
display: -webkit-flex; 
-webkit-flex-flow: row wrap; 
display: flex;
flex-flow: row wrap;
}

4.4. Порядок отображения flex-элементов: order

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

Первоначально все flex-элементы имеют order: 0;. При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order, они будут отображаться в соответствии с исходным порядком.

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-order: 1;
order: 1;
}

Рис. 6. Порядок отображения flex-элементов

5. Гибкость flex-элементов

Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex. Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink), чтобы предотвратить переполнение.

Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.

5.1. Задание гибких размеров одним свойством: flex

Свойство является сокращённой записью свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.

W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex: 3 1 100px; 
-ms-flex:  3 1 100px; 
flex:  3 1 100px;
}

5.2. Коэффициент роста: flex-grow

Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.

Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-grow: 3; 
flex-grow: 3;
}

5.3. Коэффициент сжатия: flex-shrink

Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis. Отрицательное пространство распределяется пропорционально тому, насколько элемент может сжаться, поэтому, например, маленький flex-элемент не уменьшится до нуля, пока не будет заметно уменьшен flex-элемент большего размера. Свойство не наследуется.

Рис. 8. Сужение flex-элементов в строке

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-shrink: 3; 
flex-shrink: 3;
}

5.4. Базовый размер: flex-basis

Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого. Не наследуется.

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-basis: 100px; 
flex-basis: 100px;
}

6. Выравнивание

6.1. Выравнивание по главной оси: justify-content

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow. Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto;, свойство не будет оказывать влияния. Свойство не наследуется.

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис

.flex-container {
display: -webkit-flex; 
-webkit-justify-content: flex-start;
display: flex;
justify-content: flex-start;
}

6.2. Выравнивание по поперечной оси: align-items и align-self

Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto, align-self не имеет никакого влияния.

6.2.1. Align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.

Рис. 10. Выравнивание элементов в контейнере по вертикали

Синтаксис

.flex-container {
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}

6.2.2. Align-self

Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.

Рис. 11. Выравнивание отдельных flex-элементов

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-align-self: center; 
align-self: center;
}

6.3. Выравнивание строк flex-контейнера: align-content

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

Рис. 12. Многострочное выравнивание flex-элементов

Синтаксис

.flex-container {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: flex-end; 
display: flex;
flex-flow: row wrap;
align-content: flex-end;
height: 100px;
}

По материалам CSS Flexible Box Layout Module Level 1

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать элементы внутри их контейнера как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода CSS.

Макеты Flexbox на основе рядов и столбцов

Flexbox — это модуль одномерного макета, это означает, что ваши макеты основаны на строках или столбцах. Вы можете установить направление макета, используя свойство flex-direction, которое необходимо использовать во flex-контейнере. Оно может принимать четыре значения: row, row-reverse, column и column-reverse. Вот как на экране выглядят четыре разных направления flex:

Flex-макет на основе рядов (по умолчанию):

<div>
<div></div>
<div></div>
<div></div>
</div>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.container {
display: flex;
flex-direction: row;
}

Реверсивный макет на основе рядов:

.container {
display: flex;
flex-direction: row-reverse;
}

Flex-макет на основе столбцов:

.container {
display: flex;
flex-direction: column;
}

Реверсивный макет на основе столбцов:

.container {
display: flex;
flex-direction: column-reverse;
}

На рисунке выше, вы можете увидеть макеты Flexbox с одной строкой, для которых мы не изменяли значение свойства flex-wrap по умолчанию — Nowrap . Поэтому, если вы хотите отображать элементы в нескольких строках или столбцах, добавьте для flex-контейнера также правило flex-wrap: wrap;.

Как работает центрирование Flexbox?

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

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

Когда мы говорим о центрировании flexbox, мы имеем в виду два вида центрирования:

Центрирование вдоль основной оси (также называемой осью блока).

Центрирование вдоль поперечной оси (также называемой линейной осью).

Если вам нужен идеально отцентрированный flex-элемент, вы должны отцентрировать его вдоль обеих осей.

Центрирование вдоль основной оси

Вам необходимо использовать свойство justify-content для центрирования flex-элементов вдоль главной оси. Значением по умолчанию — flex-start, которое выравнивает все элементы внутри контейнера flex по началу главной оси. Если вы хотите центрировать элементы, вам нужно использовать его со значением center.

В случае макетов на основе строк следующий код CSS центрирует элементы по горизонтали (так как здесь, главная ось также проходит горизонтально):

.container {
display: flex;
flex-direction: row;
justify-content: center;
}

И, в случае макетов на основе столбцов, то же свойство justify-content выравнивает элементы по вертикали (так как здесь, главная ось проходит вертикально):

.container {
display: flex;
flex-direction: column;
justify-content: center;
}

Для row-reverse and column-reverse центрирование работает так же, как и для row и column. Это связано с тем, что центр главной оси находится на одинаковом расстоянии от начальной и конечной точек.

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

Центрирование вдоль поперечной оси

Поскольку flexbox представляет собой одномерную разметку, поперечная ось играет второстепенную роль. Flex-элементы размещаются вдоль основной оси. Поперечная ось не меняет направление потока, а лишь регулирует элементы на экране. Существует три свойства CSS, которые вы можете использовать для центрирования вдоль поперечной оси:

align-items для однострочного центрирования всех flex-элементов,

align-self для однострочного центрирования отдельного flex-элемента,

align-content для многострочного центрирования всех flex-элементов (это свойство работает только тогда, когда flex-элементы переносятся в несколько строк).

Теперь давайте посмотрим, как они работают с различными значениями свойства flex-direction.

1. Однострочное центрирование вдоль поперечной оси

Вы можете использовать свойство align-items для выравнивания элементов вдоль поперечной оси. Если вы используете его вместе со свойством center, оно центрирует элементы по вертикали, когда flex-direction имеет значение row или row-reverse, и по горизонтали, когда flex-direction имеет значение column или column-reverse.

Вот как выглядит центрирование элементов вдоль поперечной оси в макетах на основе строк:

.container {
display: flex;
flex-direction: row;
align-items: center;
}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Так как мы не указали justify-content, оно принимает значение по умолчанию — flex-start. Таким образом, flex-элементы выравниваются по началу основной (горизонтальной) оси и по центру поперечной (вертикальной) оси:

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

.container {
display: flex;
flex-direction: column;
align-items: center;
}

Здесь свойство justify-content также остается со значением по умолчанию (flex-start). Так как в макетах на основе столбцов, основная ось является вертикальной, flexbox выравнивает элементы по верху контейнера (начало основной оси), а центрирует их по горизонтали, следуя правилу align-items: center.

2. Однострочное центрирование одного элемента вдоль поперечной оси

Вы можете не только центрировать все flex-элементы вдоль поперечной оси, но и выбрать центрирование только одного отдельного элемента с помощью CSS-свойства align-self, которое переопределяет align-items . Вам необходимо добавить align-self к отдельным flex-элементам (вместо контейнера flex) следующим образом:

<div>
<div></div>
<div></div>
<div></div>
</div>

.container {
display: flex;
flex-direction: row;
}
.center {
align-self: center;
background: magenta;
}

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

В приведенном выше примере используется макет flexbox на основе строк, но align-items работает так же, как и в случае макетов на основе столбцов.

3. Многострочное центрирование вдоль поперечной оси

Модуль макета flexbox также позволяет центрировать несколько строк элементов вдоль поперечной оси. Свойство align-content позволяет распределять пространство вокруг элементов, когда они переносятся на несколько строк. Разницу между align-items и align-content немного трудно понять, поэтому давайте рассмотрим их в сравнении друг с другом.

Когда вы устанавливаете для flex-wrap значение wrap и center только для align-items, вы получите следующее:

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}

Хотя перенесенные элементы центрированы вдоль поперечной оси (по вертикали), пространство между ними распределено равномерно. Это то, что вы можете изменить с помощью align-content следующим образом:

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
}

Как вы можете видеть ниже, свойство align-content отвечает за распределение пространства вдоль поперечной оси. Поскольку для него установлено center, многострочные элементы «тянутся» к центру контейнера:

Обратите внимание, что align-content работает только тогда, когда у нас есть более одной строки flex-элементов. Таким образом, вам не нужно беспокоиться об этом, когда у вас есть только один или несколько элементов.

Идеально центрированный Flex-элемент

Чтобы создать идеально центрированный макет с помощью flexbox, вам нужно отцентрировать его вдоль основной и поперечной осей. Наиболее частый случай использования — когда вы центрируете один элемент внутри другого. Во flexbox это всего лишь три правила CSS, которые работают с любыми HTML-элементами, а не только с div:

<div>
<div></div>
</div>

.container {
display: flex;
justify-content: center;
align-items: center;
}

Поскольку мы не установили значение для свойства flex-direction, оно принимает значение по умолчанию — row:

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

.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}

И вот как выглядит идеально центрированный многострочный макет, когда для flex-direction установлено значение column:

.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}

Заключение

Flexbox позволяет вам центрировать любые виды HTML-элементов внутри их контейнера. Применение к контейнеру правила display: flex удобно, если вы хотите расположить элементы по центру по горизонтали, вертикали или в обоих направлениях. Центрирование Flexbox — это отличное решение для создания идеально центрированных заголовков, изображений, видео, галерей продуктов и многого другого.

Источник: https://onextrapixel.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Выравнивание с помощью флексбоксов | WebReference

Выравнивание является большой частью флексбоксов. Помимо обычных свойств выравнивания в CSS, есть свойства, которые были специально разработаны для флексбоксов.

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

Вот основные свойства из этой спецификации, которые связаны с флексбоксами.

Свойство align-items

Свойство align-items указывает значение align-self по умолчанию для всех флекс-элементов, участвующих в контексте форматирования флекс-контейнера.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
align-items: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

В этом примере мы применяем align-items: center к флекс-контейнеру, поэтому все флекс-элементы выравниваются по центру оси блока.

Поскольку это настройка по умолчанию, любой из флекс-элементов может переопределить выравнивание с помощью свойства align-self.

Свойство align-self

Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
align-items: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
align-self: flex-start;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
align-self: flex-end;
}
body {
margin: 0;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Здесь у красного флекс-элемента задано значение flex-start, а у синего значение flex-end. Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.

Свойство justify-content

Свойство justify-content выравнивает целиком всё содержимое флекс-контейнера по главной оси.

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

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
justify-content: space-between;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Свойство align-content

Свойство align-content похоже на justify-content, за исключением того, что align-content выравнивает вдоль поперечной оси.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
flex-wrap: wrap;
align-content: space-between;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 10px;
width: 60%;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Свойство place-content

Свойство place-content является сокращением для justify-content и align-content.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
flex-wrap: wrap;
place-content: space-between center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 10px;
width: 60%;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
body {
margin: 0;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

margin

Вы по прежнему можете использовать margin для флекс-элементов. Вот пример применения margin: auto ко флекс-элементу, даже после того, как он был выровнен с помощью других свойств выравнивания.

<!doctype html>
<title>Пример</title>
<style>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
background-color: beige;
height: 100vh;
}
.wrapper > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
align-self: flex-start;
margin: auto;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
align-self: flex-end;
}
body {
margin: 0;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Как выровнять текст внутри flexbox по вертикали, используя CSS?

CSS flexbox: свойство flex в CSS представляет собой сочетание свойства flex-grow, flex-shrink и flex-based. Используется для установки длины гибких элементов. Свойство flex очень отзывчиво и мобильно. Это легко позиционировать дочерние элементы и основной контейнер. Поля не разрушаются с полями контента. Порядок любого элемента может быть легко изменен без редактирования раздела HTML. Flexbox был добавлен в стандарты CSS несколько лет назад для управления распределением пространства и выравниванием элементов. По сути это одномерный синтаксис макета.

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

• ALIGN-элементы
• обосновывать-контент
• Flex-направление

align-items и justify-content являются важными свойствами для абсолютного центрирования текста по горизонтали и вертикали. Горизонтальное центрирование управляется свойством justify-content, а вертикальное центрирование — свойством align-items.

Пример 1: В этом примере текстовое содержимое устанавливается вертикально по центру.

Выход:

Пример 2: Этот пример иллюстрирует, как установить выравнивание текста по левому краю во flexbox, используя CSS.

Выход:

Рекомендуемые посты:

Как выровнять текст внутри flexbox по вертикали, используя CSS?

0.00 (0%) 0 votes

Как вертикально выровнять и растянуть контент с помощью CSS flexbox

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

Руководство по Flexbox

Введение

Flexbox, также называемый модулем Flexible Box Module, является одной из двух современных систем макетов, наряду с CSS Grid.

По сравнению с CSS Grid (который является двумерным) flexbox представляет собой одномерную модель макета . Он будет управлять макетом на основе строки или столбца, но не вместе одновременно.

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

Если вам не нужна поддержка старых браузеров, таких как IE8 и IE9, Flexbox — это инструмент, который позволяет забыть об использовании

.

• Раскладки стола
• Поплавки
• clearfix хаки
• отображение: таблица хаки

Давайте погрузимся в flexbox и за очень короткое время станем им мастером.

Поддержка браузера

На момент написания (февраль 2018 г.) его поддерживали 97,66% пользователей, все самые важные браузеры реализуют его на протяжении многих лет, поэтому охватываются даже старые браузеры (включая IE10 +):

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

Включить Flexbox

Макет флексбокса применяется к контейнеру путем установки

или

содержимое внутри контейнера будет выровнено с помощью flexbox.

Свойства контейнера

Некоторые свойства flexbox применяются к контейнеру, который устанавливает общие правила для его элементов. Их

• изгиб
• justify-content
• align-items
• гибкая пленка
• гибкий поток

Выровнять строки или столбцы

Первое свойство, которое мы видим, flex-direction , определяет, должен ли контейнер выравнивать свои элементы как строки или как столбцы:

• flex-direction: строка помещает элементы как строку , в направлении текста (слева направо для западных стран)
• flex-direction: row-reverse размещает элементы точно так же, как row , но в противоположном направлении
• flex-direction: столбец помещает элементы в столбец , упорядочивая сверху вниз
• flex-direction: column-reverse помещает элементы в столбец, как и column , но в противоположном направлении

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

По умолчанию элементы начинаются слева, если flex-direction — это строка , и сверху, если flex-direction — столбец .

Вы можете изменить это поведение, используя justify-content для изменения горизонтального выравнивания и align-items для изменения вертикального выравнивания.

Изменить горизонтальное выравнивание

justify-content имеет 5 возможных значений:

• flex-start : выровняйте по левой стороне контейнера.
• гибкий конец : выровняйте по правой стороне контейнера.
• по центру : выровняйте по центру контейнера.
• пробел между ними : отображение с равным интервалом между ними.
• вокруг них : отображение с равным интервалом вокруг них

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

align-items имеет 5 возможных значений:

• flex-start : выровняйте по верху контейнера.
• гибкий конец : выровняйте по дну контейнера.
• центр : выровняйте по вертикальному центру контейнера.
• baseline : отображение на базовой линии контейнера.
• stretch : элементы растягиваются по размеру контейнера.

Примечание к исходному уровню

baseline выглядит аналогично flex-start в этом примере из-за того, что мои коробки слишком просты. Просмотрите этот Codepen, чтобы получить более полезный пример, который я разветвил из Pen, первоначально созданного Мартином Михалеком. Как видите, размеры предметов выровнены.

Обертка

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

Чтобы элементы распределялись по нескольким строкам, используйте flex-wrap: wrap . Это распределит элементы в соответствии с порядком, установленным в flex-direction . Используйте flex-wrap: wrap-reverse , чтобы изменить этот порядок в обратном порядке.

Сокращенное свойство flex-flow позволяет указать flex-direction и flex-wrap в одной строке, добавив сначала значение flex-direction , а затем значение flex-wrap , например: flex-flow: row wrap .

Свойства, применимые к каждому отдельному элементу

С этого момента мы рассмотрели свойства, которые можно применить к контейнеру.

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

• заказать
• с выравниванием
• гибкий рост
• гибкая термоусадочная
• гибкая основа
• гибкий

Давайте посмотрим на них подробнее.

Перемещение предметов до / после другого с использованием заказа

Пункты упорядочены в соответствии с порядком их назначения. По умолчанию каждый элемент имеет порядок 0 , и внешний вид в HTML определяет окончательный порядок.

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

Вертикальное выравнивание с использованием функции align-self

Элемент может выбрать переопределить контейнер align-items , используя align-self , который имеет те же 5 возможных значений align-items :

• flex-start : выровняйте по верху контейнера.
• гибкий конец : выровняйте по дну контейнера.
• центр : выровняйте по вертикальному центру контейнера.
• baseline : отображение на базовой линии контейнера.
• stretch : элементы растягиваются по размеру контейнера.

При необходимости увеличьте или уменьшите предмет

гибкий рост

Значение по умолчанию для любого элемента — 0.

Если все элементы определены как 1, а один определен как 2, более крупный элемент займет пространство двух элементов с цифрой «1».

термоусадочная

По умолчанию для любого элемента 1.

Если все элементы определены как 1, а один определен как 3, более крупный элемент будет уменьшаться в 3 раза по сравнению с другими. Когда доступно меньше места, потребуется в 3 раза меньше места.

гибкая основа

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

Если установлено значение 0, дополнительное пространство для элемента не добавляется при расчете макета.

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

гибкий

Этот объект сочетает в себе 3 вышеуказанных объекта:

• гибкий рост
• гибкая термоусадочная
• гибкая основа

и обеспечивает сокращенный синтаксис: flex: 0 1 auto

Загрузите мое бесплатное руководство по CSS и ознакомьтесь с моими премиальными курсами

Скоро в продаже:

Нажмите, чтобы узнать больше ⤴️

.

Вертикальное центрирование — Решено с помощью Flexbox — Более чистый, свободный от взлома CSS

Отсутствие хороших способов вертикального центрирования элементов в CSS было темным пятном на его репутации на протяжении почти всего его существования.

Что еще хуже, методы, которые работают для вертикального центрирования, неясны и не интуитивно понятны, в то время как очевидные варианты (например, vertical-align: middle ) никогда не работают, когда они вам нужны.

Текущий ландшафт вариантов вертикального центрирования варьируется от отрицательных полей до display: table-cell до нелепых хаков с использованием псевдоэлементов полной высоты.Тем не менее, несмотря на то, что эти методы иногда приносят пользу, они работают не во всех ситуациях. Что, если объект, который вы хотите центрировать, имеет неизвестные размеры и не является единственным дочерним элементом своего родителя? Что, если бы вы могли использовать взлом псевдоэлементов, но вам нужны эти псевдоэлементы для чего-то еще?

С Flexbox вы можете не беспокоиться. Вы можете безболезненно выровнять что угодно (вертикально или горизонтально) с помощью свойств align-items , align-self и justify-content .

Я в центре!

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

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

HTML

  

  
… 
  
… 
  
… 

  

УСС

 .Aligner {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  максимальная ширина: 50%;
}

.Aligner-item - top {
  выровнять сам: гибкий старт;
}

.Aligner-item - bottom {
  align-self: гибкий конец;
}
  

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

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

css — Вертикальное выравнивание Flexbox не работает в IE 11

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.