Блочная модель - изучение веб-разработки

CSS — Выравнивание блока по центру

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>

CSS-код:

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Браузеры, которые поддерживают данное решение:

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  /* ширина и высота 2 блока */
  width: 500px;  
  height: 250px;
  /* Значения определяются в зависимости от его размера */
  /* margin-left = - width / 2 */
  margin-left: -250px;
  /* margin-top = - height / 2 */
  margin-top: -125px;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 4.0+
Opera 7.0+
Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

.parent {
  position: relative;
}
.child {
  position: absolute;
  /* ширина и высота 2 блока в % */
  height: 50%;
  width: 50%;
  /* Значения определяются в зависимости от его размера в % */
  left: 25%; /* (100% - width) / 2 */
  top: 25%;  /* (100% - height) / 2 */
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 4.0+
Opera 7.0+
Safari 1.0+

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или,
по-другому говоря: мы хотим, чтобы правое и левое поля были
одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно
используется для блоков с фиксированной шириной, потому что если
блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот
пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">Этот довольно ...

Этот довольно узкий блок текста центрирован.
Заметьте, что строки внутри блока не центрированы (они выровнены
влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования
изображения: поместите его в собственный блок и примените свойства
полей. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Абсолютное позиционирование и отрицательное поле

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

Ниже приведен код, где дочерний элемент центрирован с помощью данного метода.

HTML

CSS

Для начала необходимо позиционировать родительский и дочерний элемент. Затем мы назначаем смещение дочернего элемента на 50% относительно верха (top) и левой стороны (left) элемента родителя, тем самым мы центрируем дочерний элемент относительно родительского. Однако наши манипуляции поставят верхний правый угол дочернего элемента по центру элемента родителя, что нас, конечно, не устраивает.

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

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

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

Объединение столбцов и строк

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

frameset cols="*,*,*"> <frameset rows="*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> </frameset> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset>

Фрейм в HTML пример:

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

<frameset cols="*,*,*"> <frame src="frame_1.html"> <frameset rows="*,*"> <frame src="frame_2.html"> <frame src="frame_3.html"> </frameset> <frame src="frame_4.html"> </frameset>

Вот, как теперь будут отображаться фреймы:

Можно создать другие вложенные фреймы:

<frameset cols="*,*"> <frame src="frame_1.html"> <frameset rows="*,*"> <frame src="frame_2.html"> <frameset cols="*,*"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset> </frameset> </frameset>

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

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

<frameset rows="*,*" cols="*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset>

Полученная сетка строк и столбцов будет выглядеть следующим образом:

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным
(position: relative), что превратит его в контейнер для абсолютно
позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным
(position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’.
(Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на
половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

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

За счет сочетания атрибутов align (горизонтальное
выравнивание) и valign (вертикальное выравнивание)
тега <td>, допустимо устанавливать несколько
видов положений элементов относительно друг друга. На рис. 1 показаны способы
выравнивания элементов по горизонтали.

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td>
требуется установить атрибут valign со значением
top (пример 2).

Пример 2. Использование valign

В данном примере характеристики ячеек управляются с помощью параметров тега
<td>, но тоже удобнее изменять через стили.
В частности, выравнивание в ячейках указывается свойствами vertical-align
и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов,
поскольку свойства vertical-align и padding
применяются одновременно к двум ячейкам.

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

Выравнивание по центру

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

Рис. 2. Добавление формулы в документ

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

Пример 4. Выравнивание формулы

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

Выравнивание по горизонтальному центру строчных (inline) и строчно-блочных (inline-block) элементов

Как известно, у нас есть простые способы центрировать контент по горизонтали. Для этого мы используем для абзаца, div-а, заголовка, т.е. любого блочного элемента, внутри которого размещен текст или картинка, — и все работает. Например, код для изображения ниже будет таким:

Изображение внутри абзаца с text-align:center

1
2
3

<pstyle=»text-align: center»>

<p>

Аналогично будет центрирован любой элемент, для которого свойство задано, как или .

Форматирование рамки и отступов вокруг фрейма

Теперь, когда мы определили макет, если нам нужно, мы можем увеличить или уменьшить отступы между фреймами, а также удалить рамку между ними. Используя макет, который мы создали в предыдущем пункте, давайте удалим рамки между тремя столбцами, но оставим рамку между верхними и нижними рядами. Давайте также добавим отступ вокруг содержимого первого фрейма HTML:

<frameset rows="150px,*"> <frame noresize src="frame_1.html" marginheight="15"> <frameset cols="20%,*,20%"> <frame src="frame_2.html" frameborder="0"> <frame src="frame_3.html" frameborder="0"> <frame src="frame_4.html" frameborder="0"> </frameset> </frameset>

Атрибут marginheight, примененный к первому фрейму, добавляет отступ в 15 пикселей выше и ниже содержимого, загружаемого в первом фрейме. Значение frameborder, равное 0, удаляет рамки для всех трех нижних фреймов. Вот как это будет выглядеть:

Синтаксис свойства CSS display

display: none;

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

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

display: inline;

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

display: block;

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

Что такое Flexbox?

Flexbox – это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо для случаев адаптивности страницы под различные размеры экрана и для различных устройств.

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

На данный момент flexbox поддерживается практически всеми современными браузерами, включая Android и iOS.

Когда использовать Flexbox при верстке макета

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

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

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

Контейнеры, дочерние элементы и Flex

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

flexbox – контейнер становится flexbox после того, как подключается свойство со значением или
flex item – дочерний элемент в flexbox
главная ось (main axis) – это основная ось, вдоль которой выравниваются элементы
перекрестная ось (cross axis) – ось, перпендикулярная главной оси. Также называется поперечной осью
главное начало/главный конец (main-start/main-end) – флекс элементы помещаются в контейнер, который начинается со стороны главного начала, и заканчивается к главному концу
перекрестное начало и конец (cross start/end) – флекс линии заполняются items (элементами) и помещаются в контейнер, который начинается со стороны перекрестного начала флекс контейнера и идет к перекрестному концу
свойство основного размера (main size) – ширина или высота флекс элемента, в зависимости от того, что находится в основном измерении главной оси, является основным размером элемента. Свойство основного размера элемента flex – это свойство ширины или высоты, в зависимости от того, что находится в основном измерении
свойство перекрестного размера (cross size) – ширина или высота флекс элемента, в зависимости от того, что находится в поперечной оси измерении, является перекрестным размером элемента. Свойство перекрестного размера зависит от ширины или высоты, которое находится в поперечном измерении

Графическое описание важных концепций для flexbox в CSS3

В CSS есть определенные свойства, на которые не влияет свойство flexbox, поскольку они фактически не делают контейнеры блоками:

column-*
float
clear
vertical-align
::first-line и ::first-letter

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

Теперь мы можем начать строить макет, используя flexbox. Для этого создайте костяк html-страницы (или же в php, если вы используете CMS).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Создайте родительский контейнер внутри :

<div class="content">
</div>

Внутри этого контейнера вы можете добавить любой контент.

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

<div class="content">
  <div class="blok">Блок информации №1</div>
  <div class="blok">Блок информации №2</div>
  <div class="blok">Блок информации №3</div>
  <article>Здесь основной контент.</article>
</div>

Теперь, чтобы придать этому костяку некоторых красок, добавим несколько основных стилей CSS (вы можете это сделать с помощью отдельного подключаемого файла css стилей, или же включить эти стили в тег в разделе ).

Абсолютное позиционирование и отрицательные поля

Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.

В коде примера выполняется одновременное центрирование по горизонтали и вертикали:

CSS:

#parent {position: relative;}
#child {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30%;
	width: 50%;
	margin: -15% 0 0 -25%;
}

Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.

Данный метод работает не во всех браузерах.

Помните макеты на основе таблиц?

Несмотря на то, что большинство из нас больше не использует табличную верстку, display: table CSS и inline table CSS может оказаться полезно в некоторых случаях. Например, если вы хотите выводить таблицы только на более широких макетах, а для меньших экранов хотите сохранить стандартное расположение блоков. Этого можно достигнуть с помощью комбинации медиа-запросов и свойства display.

table	Соответствует HTML-элементу <table>. Определяет структурный блок.
table-header-group	Соответствует HTML-элементу <thead>.
table-row	Соответствует HTML-элементу <tr>.
display table-cell	Соответствует HTML-элементу <td>.
table-row-group	Соответствует HTML-элементу <tbody>.
table-footer-group	Соответствует HTML-элементу <tfoot>.
table-column-group	Соответствует HTML-элементу <colgroup>.
table-column	Соответствует HTML-элементу <col>.
table-caption	Соответствует HTML-элементу <caption>.
inline-table CSS	Это единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня.

@media screen and (min-width: 720px) {
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
}
.tr {
  margin-bottom: 1.6rem;
}
@media screen and (min-width: 720px) {
  .tr {
    display: table-row;
  }
}
@media screen and (min-width: 720px) {
  .td {
    display: table-cell;
    border: #f0f0f0 1px solid;
    padding: 0.4rem;
  }
  .td:first-child {
    width: 11em;
  }
}
.th {
  font-size: 1rem;
  line-height: 1.6rem;
  font-family: "Palo Alto";
}
@media screen and (min-width: 720px) {
  .th {
    font-size: 1.294rem;
    line-height: 1.6rem;
  }
}
@media screen and (min-width: 720px) {
  .th {
    font-size: 0.8rem;
    line-height: 1.6rem;
    font-family: "Roboto Slab", Rockwell, serif;
    font-weight: 700;
  }
}
@media screen and (min-width: 720px) and (min-width: 720px) {
  .th {
    font-size: 1rem;
    line-height: 1.6rem;
  }
}
.th::before {
  content: 'display: ';
}
@media screen and (min-width: 720px) {
  .th::before {
    content: '';
  }
}
.th::after {
  content: ';';
}
@media screen and (min-width: 720px) {
  .th::after {
    content: '';
  }
}

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Выравнивание элементов формы

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

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы
формы — по левому, потребуется таблица с невидимой границей и двумя
колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые
поля (пример 5).

Пример 5. Выравнивание полей формы

В данном примере, для тех ячеек, где требуется задать выравнивание по правому
краю, добавлен атрибут align=»right».
Чтобы надпись «Комментарий» располагалась по верхней границе многострочного
текста, для соответствующей ячейки устанавливается выравнивание по верхнему
краю с помощью атрибута valign.

Абсолютное позиционирование и растягивание

В коде примера выполняется центрирование по вертикали и горизонтали.

CSS:

#parent {position: relative;}
#child {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 30%;
	margin: auto;
}

Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.

Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.

К сожалению, данный метод не работает в IE7 и ниже.

Применение CSS — выравнивание по центру HTML

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

CSS можно использовать, чтобы:

Центрировать текст;
Центрировать блочный элемент (например, div);
Центрировать изображение;
Вертикально центрировать блок или изображение.

Много лет назад веб-дизайнеры могли использовать <center> для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.

Свойство оrder для Flexbox

Порядок элементов во Flexbox происходит со свойствами flex-direction и flex-wrap: указывает направление главной оси. Свойство оrder может принимать следующие значения:

(по умолчанию) главной оси: слева направо
главной оси: справа налево
главной оси : сверху вниз
главной оси: снизу вверх

определяет, расположены ли flex-элементы в один ряд или в несколько. Он также контролирует направление поперечной оси. Может иметь три значения:

(по умолчанию) размещает flex-элементы в одну строку; поперечная ось стоит в положении по умолчанию
размещает flex-элементы в несколько строк; поперечная ось стоит в положении по умолчанию
размещает flex-элементы в несколько строк; поперечная ось в обратном порядке

Положение поперечной оси по умолчанию:

сверху вниз в случае и
слева направо в случае и

В моей предыдущей статье о выравнивании flexbox вы можете найти четыре подробных примера (с демонстрациями) о том, как настроить основную ось в четырех разных направлениях, используя свойство

Однако, когда возникает вопрос расстановки элементов во флексбоксе, по моему мнению более важно знать, как совместно использовать свойства и для достижения грамотного исходного кода.

Пример шорткода

Мы используем простой код, чтобы увидеть, как работает flexbox расстановка элементов. В данном примере HTML состоит из нескольких элементов:

Элемент div будет flex-контейнером, а div с классом будут flex-элементами. Мы будем использовать (почти) один и тот же CSS код во всех примерах, только поменяются свойства и . Вот как выглядит наш CSS со значениями и :

Тот же пример в демонстрации на CodePen:

Расстановка элементов с помощью и

Теперь мы действительно дошли до самого интересного! Теоретически понять принцип расстановки элементв с помощью флексбокса не так уж и сложно, но на практике, безусловно, могут возникать проблемы. Это происходит из-за того, что трудно предугадать, как разные варианты направления и комбинируются между собой.

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

Как вы видите, когда является , flex-элементы располагаются горизонтально слева направо. Когда вместо мы используем , flexbox начинает выкладывать элементы снизу вверх, а не наоборот. Это происходит потому, что меняет направление перпендикулярной оси.

Когда это , элементы располагаются вертикально сверху вниз. И когда мы используем вместо , flexbox начинает размещать элементы справа (теперь это начальная точка поперечной оси), а не слева.

Расстановка элементов с помощью и

Теперь давайте посмотрим на то, как flexbox размещает элементы, когда flex-direction — это и .

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

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

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

Ускорьте процесс с помощью

Также значения и могут применяться к одному классному CSS свойству. Оно называется flex-flow. Чтобы его использовать, нам нужно прописать эти два значения вместе, как это сделано ниже: