Html flexbox: Полное руководство по Flexbox / Хабр

Вёрстка с помощью CSS Flexbox

  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

HTML5 | Flexbox

Что такое Flexbox. Flex Container

Последнее обновление: 18.04.2017

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:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
			}
			.flex-item {
				text-align:center;
				font-size: 1.1em;
				padding: 1.5em;
				color: white;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
        </style>
    </head>
    <body>
        <div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
    </body>
</html>

Для контейнера flex-container установлено свойство

display:flex. В нем располагается три flex-элемента.

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.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 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
        </style>
    </head>
    <body>
        <div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
		
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
		</div>
    </body>
</html>

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

5 техник работы с flexbox, о которых стоит знать веб-разработчику

В этой статье мы рассмотрим, как c помощью flexbox решить основные проблемы CSS, которые возникают при верстке макета, без боли.

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

На первый взгляд не кажется сложным, но на деле сверстать колонки таким образом может стать не очень приятной задачей. Просто установить min-height нельзя, так как при увеличении объема контента в одной из них ее высота вырастет, а остальные останутся короткими.

Если использовать flexbox, то решение будет довольно простым. Все, что нужно, – инициировать flex и убедиться, что в свойствах flex-direction и align-items установлены значения по умолчанию.

CSS

.container {
/* Инициализируем flex */
  display: flex;

/* Это значения по умолчанию, но их все равно можно установить */
  flex-direction: row; /* Элементы внутри контейнера будут позиционироваться горизонтально */
  align-items: stretch; /* Элементы внутри контейнера будут занимать всю его высоту */
}

HTML

<div>

<!-- Одинаковые по высоте колонки -->

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

</div>

Еще недавно, чтобы поменять порядок элементов на странице, необходимо было прибегать к помощи JavaScript. С использованием flexbox все, что для этого потребуется, – изменить одно свойство.

Называется оно order и позволяет менять местами любое количество flex-элементов и изменять последовательность, с которой они располагаются на экране. Единственный параметр целым числом определяет позицию элемента: чем ниже номер, тем выше приоритет.

CSS

.container {
  display: flex;
}

/* Меняем порядок элементов */

.blue {
  order: 3;
}

.red {
  order: 2;
}

.green {
  order: 1;
}

HTML

<div>

<!-- Элементы будут выстроены в обратном порядке -->

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

</div>

Вертикальное выравнивание в CSS – одна из тех проблем, которые заставляют негодовать: как такая тривиальная вещь может так сложно реализовываться? Если вам когда-либо приходилось гуглить, как выровнять блок по вертикали, вы наверняка видели целую кучу различных техник, но ни одна из них явно не спроектирована для создания красивых макетов.

Flexbox предоставляет простое решение этой проблемы. Flex-разметка имеет две оси – X и Y, а также два свойства для выравнивания по каждой из них. Используя их, мы можем выровнять любой элемент строго по центру родительского контейнера.

CSS

.container {
  display: flex;

/* Центр по главной оси */
  justify-content: center;

/* Центр по вторичной оси */
  align-items: center;
}

HTML

<div>

<!-- Любой внутренний элемент будет расположен по центру по двум осям -->

  <div>...</div>

</div>

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

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

Ряд в сетке на flexbox – это контейнер со свойством display: flex. Внутри может располагаться любое количество вертикальных колонок, размер которых устанавливается через свойство flex. Flex-модель адаптирует размеры колонок под любой экран, а если окажется, что места для колонок на экране недостаточно, то можно переделать модель в полностью вертикальную с помощью

media-query.

CSS

.container {
  display: flex;
}

/* Классы для каждого размера колонок. */

.col-1 {
 flex: 1;
}

.col-2 {
 flex: 2;
}

@media(max-width: 800px) {
  .container {
    /* Делаем макет вертикальным */
    flex-direction: column;
  }
}

HTML

<div>

  <!-- Эта колонка будет шириной 25% -->
  <div>...</div>

  <!-- Эта колонка будет шириной 50% -->
  <div>...</div>

  <!-- Эта колонка будет шириной 25% -->
  <div>...</div>

</div>

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

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

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Главная секция заполнит все свободное место на странице, которое не занял футер */
.main {
  flex: 1 0 auto;
}

/* Футер заполнит столько вертикального пространства, сколько ему будет нужно, ни пикселем больше */

footer {
  flex: 0 0 auto;
}

HTML

<body>

  <!-- Весь контент будет здесь -->
  <div>...</div>

  <!-- наш футер -->
  <footer>...</footer>

</body>

Шпаргалка по FLEXBOX // «Фрилансер по жизни»

Значение по умолчанию (не нужно указывать). Flex-элементы прижимаются к началу основной оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:flex-start;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Flex-элементы прижимаются к концу основной оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:flex-end;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Flex-элементы располагаются по центру основной оси

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

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

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:space-around;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Flex-элементы располагаются равномерно по основной оси с одинаковым пространством вокруг них.

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d; display:flex; justify-content:space-evenly;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4; /* плюс прочие стили для текста, отступы */

}

Выравнивание элементов во 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 (Макет Сетки)
Дисплей

: flex

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

строка (по умолчанию) обратный ряд столбец столбец-обратный

гибкая пленка

, переносятся ли элементы в следующий столбец строки (применяется только в том случае, если общая ширина и высота элементов больше, чем у контейнера)

nowrap (по умолчанию) заворачивать обертка-реверс

justify-content

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

flex-start (по умолчанию) гибкий конец центр пространство вокруг пространство между

align-items

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

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

align-content

применяется только в том случае, если имеется более одного столбца строк с элементами

растянуть (по умолчанию) центр гибкий старт гибкий конец пространство вокруг пространство между

.

ryanve / flexboxes: современный фреймворк CSS flexbox с чистыми возможностями сетки flexbox

перейти к содержанию Зарегистрироваться
  • Почему именно GitHub? Особенности →
    • Обзор кода
    • Управление проектами
    • Интеграции
    • Действия
    • Пакеты
    • Безопасность
    • Управление командой
    • Хостинг
    • мобильный
    • Истории клиентов →
    • Безопасность →
  • Команда
  • Предприятие
  • Проводить исследования
    • Изучите GitHub →
    Учитесь и вносите свой вклад
    • Темы
    • Коллекции
    • В тренде
    • Учебная лаборатория
    • Руководства с открытым исходным кодом
    Общайтесь с другими
    • События
    • Форум сообщества
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *