Flex по центру – Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.

Содержание

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

Об авторе: Рэйчел Эндрю — не только главный редактор журнала 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 justify-content: полное руководство по центрированию

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>

<div>

    <div></div>

    <div></div>

    <div></div>      

</div>

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

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

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

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

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

.container {

    display: flex;

    flex-direction: row;

}

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

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

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

.container {

    display: flex;

    flex-direction: row-reverse;

}

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

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

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

.container {

    display: flex;

    flex-direction: column;

}

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

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

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

.container {

    display: flex;

    flex-direction: column-reverse;

}

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

На рисунке выше, вы можете увидеть макеты 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; }

.container {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

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

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

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

.container {

    display: flex;

    flex-direction: column;

    justify-content: center;

}

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

Для 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; }

.container {    

    display: flex;

    flex-direction: row;

    align-items: center;

}

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

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

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

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

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

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

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

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

.container {    

    display: flex;

    flex-direction: column;

    align-items: center;

}

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

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

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

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

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

<div>

        <div></div>

        <div></div>

        <div></div>

</div>

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

.container {

    display: flex;

    flex-direction: row;

}

.center {

    align-self: center;

    background: magenta;

}

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

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

В приведенном выше примере используется макет 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; }

.container {    

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

}

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

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

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

.container {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    align-content: center;

}

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

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

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

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

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

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

<div>

    <div></div>

</div>

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

.container {

    display: flex;

    justify-content: center;

    align-items: center;

}

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

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

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

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

.container {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    align-content: center;

}

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

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

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

.container {

    display: flex;

    flex-wrap: wrap;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    align-content: center;

}

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

Заключение

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

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

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

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

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

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

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

Как выравнять по центру элементы display: inline-flex? — Хабр Q&A

Есть линия с элементами как выравнять её по центру?
<div>
	<h4><p>Ваше количество баллов: 12 </p>Самое большое количество баллов: 23</h4>
	<hr>
	<div>
		<div>
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div>
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div>
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div>
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div>
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
		<div>
			<img src="../images/icons8-пользователь-без-половых-признаков-80.png">
			<div>Имя Фамилия</div>
			<div>Баллов: 10</div>
		</div>
	</div>
	<div></div>
</div>
.egatop {
	width: 90%;
	display: block;
	margin: 30px auto;
	min-height: 100px;
	background: #fff;
}

.egatop h4 {
	text-align: center;
	padding: 15px 0 0 0;
	font-size: 20px;
	font-family: "Open Sans", sans-serif;
}

.topuser {
	width: 162.12px;
	height: 170px;
	background: #ffcc68;
	float: left;
	border-radius: 2px;
	transition: .5s;
	margin: 20px 10px 30px 10px;
}

.accbal {
	color: #66cc00;
	font-size: 17px;
	padding: 0;
	margin: 0;
	font-family: "Arial";
	font-weight: bold;
}

.clear {
	clear: both;
}

.warapperuser {
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.topuser > img {
	display: block;
	margin: 1px auto 1px auto;
	width: 100px;
	height: 100px;
}

.topuser > div {
	text-align: center;
	font-family: "Open Sans", sans-serif;
}

.topuser > div:last-child {
	color: #00a816;
	font-weight: bold;
}

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

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

Ниже приведено очень простое руководство по центрированию элементов с использованием Flexbox.

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

Начнем с div, который содержит два абзаца, которые мы хотим центрировать по горизонтали на одной оси. Это так же просто, как использование свойства justify-content со значением центра на контейнере:

Вертикальное центрирование

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

Вертикальное центрирование на всей странице

Если вы хотите поместить элемент по центру страницы, это может быть немного сложнее, потому что элементы не имеющие высоты и ширины будут располагаться только по вертикали в соответствии с высотой их контейнера. Это означает, что сам контейнер должен быть такой же высоты, как и сама страница. Это достаточно просто сделать, используя 100vh — 100% высоты окна просмотра.

Дата публикации: 2019-07-31

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

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

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

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

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

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

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

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

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

На рисунке выше, вы можете увидеть макеты 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 центрирует элементы по горизонтали (так как здесь, главная ось также проходит горизонтально):

Об авторе: Рэйчел Эндрю — не только главный редактор журнала 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 . Если задано только одно значение, то оно применяется к обоим свойствам:

Выравнивание по осям с помощью 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.

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


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


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

Заключение

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

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

Рекомендуем к прочтению

Нетривиальная расстановка элементов на flexbox без media-запросов / Habr

Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.

Итак, сначала постановка задачи, затем предыстория и, наконец, решение.

Постановка задачи


  1. На большом экране два элемента расположены горизонтально, при адаптивке на телефонах – вертикально.
  2. При этом на больших экранах они должны прижиматься к краям (как при justify-content: space-between), а на маленьких — стоять по центру (justify-content: center).

Казалось бы, что тут решать!? Но есть ещё одно условие: надо сделать это перестроение в автоматическом режиме – без media-запросов.

Зачем, спросите вы? К чему эти фокусы с запретом на media-запросы, зачем flexbox ради flexbox?

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

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

Ещё один яркий пример: логотип и меню в шапке. Ширина лого известна, а вот с меню — проблема. Ведь часто мы делаем вёрстку на формально заполненном шаблоне, а в реальности меню будет формироваться из админки сайта. Сколько пунктов – никто не знает, следовательно, не ясно, на какой ширине делать перестроение.

Понятно, что на реальном сайте меню всё равно будет превращено в кнопку для мобильной версии. Но на какой ширине делать данное превращение, если мы не знаем количества пунктов? Если мы опоздаем с этим превращением, хотелось бы, чтобы меню на некоторое время слетело вниз красиво, а не абы как.

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

Способ 1 просто неудобен, способ 2 будет более-менее нормально смотреться для примера с заголовками и датами, но будет просто ужасен для логотипа и меню.

Итак, постановка задачи. Как на flexbox без media-запросов организовать идеальное поведение элементов: визуально расположить их по краям большого экрана и отцентровать при соударении? (Ну или почти идеальное, из-за использования text-align и flex-grow вылезут небольшие ограничения, которые легко решаются с помощью дополнительной обёртки)

Предыстория


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

Для достижения идеального поведения всегда чего-то не хватало. Flex-grow поможет на одном экране, навредит на другом. Margin: auto и text-align помогают, но и их не хватает для достижения результата.

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

Озарение пришло летом 2019, когда, разбирая домашнее задание на курсе по вёрстке, я увидел совершенно не по делу применённый flex-grow: 0.5. В том примере жадность 0.5 не сильно помогала решить задачу, однако, я сразу почувствовал, что вот он – секретный ингредиент, которого всегда не хватало. Не то, чтобы я не знал, что grow может быть дробным. Просто в голову не приходило, что 0.5 может помочь достичь идеальной расстановки! Теперь это кажется очевидным, ведь flex-grow: 0.5 – это захват ровно половины свободного пространства

В общем, увидев flex-grow: 0.5, я за 10 минут полностью решил задачу расстановки элементов, которую с 2014 года считал нерешаемой. Увидев, что код получился очень простой и лаконичный, я решил, что изобрёл давно известный велосипед. Но всё-таки несколько дней назад я решил проверить, насколько хорошо он известен верстальщикам и запустил интерактив на своём youtube-канале по веб-разработке с 45 тыс. подписчиков.

Задал задачку, стал ждать. И её не решил никто из подписчиков. Не решили её и знакомые верстальщики. Крепло ощущение, что народ просто не знает, как идеально расположить элементы с помощью flex. Так и созрел данный пост. Ведь теперь мне кажется, что огромное количество верстальщиков считают, что так, как было описано в постановке задачи, расставить элементы без media-запросов просто нельзя.

Решение, которое мы рассмотрим ниже является вполне универсальным. Иногда оно требует создания дополнительной обёртки для центровки текста или правильного отображения фона. Но зачастую удаётся обойтись всего 6 строками CSS-кода без изменения структуры.

Базовое решение


За основу возьмём небольшой кусочек HTML. Это пример, который мы видели на самой первой gif-картинке. Дата и заголовок прижаты к краям, а при перескоке должны становиться по центру.
<div>
  <div>
    <div>Article posted in: PHP Programming</div>
    <div>21.10.2019</div>
  </div>
  <div>
    <div>Article posted in: Javascript</div>
    <div>22.10.2019</div>
  </div>
  <div>
    <div>Article posted in: wft my programm don't work</div>
    <div>23.10.2019</div>
  </div>
</div>

Опустим неинтересные стили, связанные с фонами, рамками и т.п. Главная часть CSS:
.blogItem {
  display: flex;
  flex-wrap: wrap;
}

.blogItem__cat {
  flex-grow: 0.5;
  margin-left: auto;
}

.blogItem__dt {
  flex-grow: 0.5;
  text-align: right;
}

Когда видишь этот код первый раз, может сложиться ощущение, что его написал не человек, а рандомный бредогенератор CSS-свойств! Поэтому нам обязательно нужно осознать, как это работает!

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

Изначально flex-элементы стоят рядом и получают размер по своему контенту. flex-grow: 0.5 отдаёт каждому элементу по половине свободного пространства, т.е. свободного пространства нет, когда они стоят рядом. Это безумно важно, потому что margin-left: auto вообще не работает, пока элементы помещаются на одной строке.

Первый элемент сразу стоит идеально, содержимое второго нужно прибить к правому краю с помощью text-align: right. В итоге мы получили аналог justify-content: space-between, вообще не написав justify-content.

Но ещё большие чудеса начинаются при перескоке элементов на отдельные строки. Margin-left auto отталкивает первый элемент на максимально возможное значение от левого края. Ну-ка, ну-ка, сколько там у нас пространства осталось? 100% минус размер элемента минус половина свободного от grow = половина свободного! Вот такая центровка!

Второй элемент стоит у левого края и занимает пространство, равное своему базовому размеру, плюс половина свободного. В это трудно поверить, но text-align: right отправит элемент идеально по центру!

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

Ключом к созданию такого решения является flex-grow: 0.5, без которого не удаётся отключить margin-[left-right] auto на больших экранах. Ещё один фантастический факт – justify-content вообще не используется. Тотальный парадокс ситуации заключается в том, что любая попытка выравнивания контента с помощью justify-content сломает нашу схему.

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

Улучшенное решение


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

Если бы заголовок изначально был втором элементом (располагался справа от даты), то тогда на него действовал бы text-align: right, из-за которого текст смотрелся бы ещё более странно. Кстати, и дате, и заголовку мы не можем поставить фон из-за flex-grow 0.5.

Однако это всё легко решается созданием дочернего элемента со свойствами

some-selector {
  display: inline-block;
  text-align: center
}

За счёт строчно-блочности такой элемент получается ровно по размеру контента, и, что очень важно, text-align родителя ставит его на нужное место. А уже внутри элемента используем тот text-align, который нам нужен, чаще всего center.

Важно, что работу этого внутреннего text-align мы вообще не ощущаем до тех пор, пока во flex-элементе всего одна строка.

Кстати, inline-flex тоже подойдёт!

Примеры кода



Данная схема повышает универсальность решения, но нужна далеко не всегда. Например, меню сложно представить сделанным в две строки, поэтому и обёртка нас не спасёт – надо превращать меню в кнопку.

Дополнительные мысли


Отступы


Сейчас элементы перед тем, как соскочить на отдельные строки, подходят вплотную друг к другу. Как же добавить между ними отступ, не отодвинув их от краёв контейнера?
Эту задачу легко решает классический приём: padding — элементам и отрицательный margin – родителю. Готовый пример.

Зеркальность


Разумеется, любой из наших примеров можно отзеркалить за счёт wrap-reverse, flex-direction, margin-right: auto и т.п. Например, меню выше логотипа смотрится хорошо.

Заключение


Данный приём является просто интересным решением определённой задачи. Разумеется, не надо отказываться от media-запросов и верить во flexbox без media. Но в рассмотренных примерах, на мой взгляд, данное решение представляется очень интересным.

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

Надеюсь, рассмотренная схема работы с flex-элементами окажется полезной и облегчит жизнь верстальщиков при решении определённых задач!

Выравнивание с помощью флексбоксов | 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>

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

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

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

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

Курс по вёрстке сайта на CSS Grid

Учебник CSS 3. Статья "Верстка по Flexbox. Часть 2."

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

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

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

Порядок следования элементов

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

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


Обращаю Ваше внимание, что если вы указываете значение свойства order для одного флекс элемента в контейнере, то это не будет являться его порядковым номером, а указывает только на "вес" его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.


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

Рис. 218 Схематичное отображение работы CSS свойства order

В этом учебнике мы уже неоднократно сталкивались со свойством z-index, благодаря которому, вы можете управлять видимостью элементов по оси z, принцип указания значений свойства order аналогичен. Вы можете использовать в своей работе любые значения, которые будут вам интуитивно понятны, например, 100, 200, 300 и тому подобные.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения следования элементов в колоннах</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
}
div > div { 
	width: 50px; /* устанавливаем ширину блока */
	height: 50px;  /* устанавливаем высоту блока */
	color: #fff;  /* цвет текста */
	margin: 1px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
} 
.container div:nth-of-type(4) { /* выбираем четвертый <div> в первом контейнере */ 
	order: -1;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
.container2 div:nth-of-type(4) { /* выбираем четвертый <div> во втором контейнере */ 
	order: 1;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
.container3 div:nth-of-type(4) { /* выбираем четвертый <div> в третьем контейнере */ 
	order: 2;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */ 
}
</style>
</head>
	<body>
		<p>order: -1;</p>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<p>order: 1;</p>
		<div class = "container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<p>order: 2;</p>
		<div class = "container3">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по пять элементов <div>. С использованием псевдокласса :nth-of-type() указали для каждого четвертого элемента в определенном контейнере следующие значения свойства order:

  • Для элемента в первом контейнере значение -1, что позволяет сместить элемент к левому краю родительского контейнера относительно остальных элементов, которые по умолчанию имеют значение 0 свойства order.
  • Для элемента во втором контейнере значение 1, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов.
  • Для элемента в третьем контейнере значение 2, что позволяет сместить элемент к правому краю родительского контейнера относительно остальных элементов. Еще раз обращаю Ваше внимание, что значение не является его порядковым номером, мы могли указать значение 100, 200, 500, элемент не изменит своей позиции так как другие элементы в контейнере имеют значение этого свойства равное 0.

Результат примера:

Пример изменения следования элементов в колоннах.

В следующем примере мы рассмотрим как происходит изменение следования элементов внутри колонн:

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения следования элементов в колоннах</title>
<style> 
.container {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	flex-direction: column; /* флекс элементы отображаются вертикально как колонны (формируются сверху вниз) */
}
.container:hover {
	flex-direction: column-reverse; /* флекс элементы отображаются вертикально как колонны (формируются снизу вверх) */
}
div > div {
	height: 50px;  /* устанавливаем высоту блока */
	color: #fff;  /* цвет текста */
	margin: 1px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
} 
.container div:nth-of-type(5) { /* выбираем пятый <div> в  контейнере */ 
	order: -100;  /* определяем порядок следования флекс элемента */
	background: violet;  /* цвет заднего фона */
}
.container div:nth-of-type(1) { /* выбираем первый <div> в  контейнере */ 
	order: 100;  /* определяем порядок следования флекс элемента */
	background: forestgreen;  /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</body>
</html>

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

Для первого элемента <div> с помощью псевдокласса :nth-of-type() мы установили значение свойства order равное 100, что позволило сместить его в конец всех элементов, а пятому элементу указали значение свойства order равное -100, что позволило сместить его влево перед всеми элементами.

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

Результат примера:

Пример изменения следования элементов в колоннах

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

В предыдущей cтатье "Верстка по Flexbox. Часть 1." мы с Вами рассмотрели как можно произвести выравнивание всех элементов внутри флекс контейнера. Но как быть, если какой то флекс элемент необходимо выровнять по особенному? На помощь нам приходит свойство align-self, которое задает выравнивание отдельных элементов строки внутри флекс контейнера. Кроме того, это свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу.


Обращаю Ваше внимание, что если для флекс элемента установлено свойство margin (внешние отступы) со значением auto, то свойство align-self будет игнорировано.


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

Рис. 221 Схематичное отображение работы свойства align-self

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства align-self</title>
<style> 
.container {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	height: 250px;  /* устанавливаем высоту контейнера */
	background: rgba(0,150,208,.2); /* цвет заднего фона */
	align-items: center; /*	флекс элементы располагаются по центру контейнера (середина поперечной оси). */
}
.container > div {  /* устанавливаем стили для элементов <div>, вложенных в контейнер */
	width: 20%;  /* устанавливаем ширину блока */
	color: #fff;  /* цвет текста */
	margin: 0 5px;  /* внешние отступы */
	background: rgb(0,150,208);  /* цвет заднего фона */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1) { /* выбираем первый <div> в  контейнере */ 
	align-self: auto;  /* флекс элемент наследует значение его родительского контейнера */
}
.container div:nth-of-type(2) { /* выбираем второй <div> в  контейнере */ 
	align-self: stretch;  /* флекс элемент растягивается по размеру строки флекс контейнера вдоль поперечной оси */
}
.container div:nth-of-type(3) { /* выбираем третий <div> в  контейнере */ 
	align-self: flex-start;  /* флекс элемент располагается в начале строки флекс контейнера (начало поперечной оси) */
}
.container div:nth-of-type(4) { /* выбираем четвертый <div> в  контейнере */ 
	align-self: flex-end;  /* флекс элемент располагается в конце строки флекс контейнера (конец поперечной оси) */
}
.container div:nth-of-type(5) { /* выбираем пятый <div> в  контейнере */ 
	align-self: baseline;  /* флекс элемент распологаются по его базовой линии строки флекс контейнера */
}
</style>
</head>
	<body>
		<div class = "container">
			<div>auto (наследует center)</div>
			<div>stretch</div>
			<div>flex-start</div>
			<div>flex-end</div>
			<div>baseline</div>
		</div>
	</body>
</html>

В этом примере мы создали блочный флекс контейнер, внутри которого мы разместили пять элементов <div> шириной 20% от родительского контейнера. С помощью свойства align-items указали, что все флекс элементы располагаются по центру контейнера (середина поперечной оси).

С использованием псевдокласса :nth-of-type() указали для каждого элемента свое значение свойства align-self.

Для первого элемента <div> мы установили значение auto (значение по умолчанию), что позволило унаследовать значение от родительского элемента, в данном случае это выполнено лишь для демонстрации, так как это не влияет на конечное отображение.

Для второго элемента <div> мы установили, что флекс элемент растягивается по размеру строки флекс контейнера вдоль поперечной оси. Если для контейнера не задано значение отличное от stretch, то именно это значение будет унаследовано.

Третий элемент располагается в начале строки флекс контейнера (начало поперечной оси), а четвертый располагается в конце строки флекс контейнера (конец поперечной оси).

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

Результат примера:

Рис. 222 Пример использования свойства align-self

Увеличение относительной ширины флекс элемента

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

Определить на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере доступно с помощью свойства flex-grow.


Обращаю Ваше внимание на то, что отрицательные значения свойства flex-grow не допускаются. Значение по умолчанию 0 - элементы не будут увеличиваться.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-grow</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	height: 100px;  /* устанавливаем высоту для контейнеров */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1),
.container div:nth-of-type(3),
.container2 div:nth-of-type(1),
.container2 div:nth-of-type(3),
.container3 div:nth-of-type(1),
.container3 div:nth-of-type(3) {
	flex-grow: 1;  /* блок будет увеличен на 1 по отношению к остальным флекс элементам */
} 
.container div:nth-of-type(2) {
	flex-grow: 2;  /* блок будет увеличен на 2 по отношению к остальным флекс элементам */
} 
.container2 div:nth-of-type(2) {
	flex-grow: 3;  /* блок будет увеличен на 3 по отношению к остальным флекс элементам */
} 
.container3 div:nth-of-type(2) {
	flex-grow: 4;  /* блок будет увеличен на 4 по отношению к остальным флекс элементам */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>2</div>
			<div>1</div>
		</div>
		<div class = "container2">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
		<div class = "container3">
			<div>1</div>
			<div>4</div>
			<div>1</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. С использованием псевдокласса :nth-of-type() указали для каждого первого и третьего элемента в каждом контейнере, что блок будет увеличен на 1 по отношению к остальным флекс элементам. Для каждого второго элемента в контейнерах указали различные значения свойства flex-grow.

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

Результат примера:

Рис. 223 Пример использования свойства flex-grow

Размер флекс элемента по умолчанию

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

В отличии от свойства flex-grow используются как абсолютные значения (px, em, pt и так далее), так и значения в процентах, а не относительные значения, при этом отрицательные значения не допускаются. Значением по умолчанию является значение auto (размер равен размеру флекс элемента). Если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания флекс элемента.

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

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-basis</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	height: 95px;  /* устанавливаем высоту для контейнеров */
	background: rgba(0,150,208,.3);  /* цвет заднего фона */
	margin-bottom: 5px;  /* внешние отступы снизу */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1),
.container div:nth-of-type(3),
.container2 div:nth-of-type(1),
.container2 div:nth-of-type(3),
.container3 div:nth-of-type(1),
.container3 div:nth-of-type(3) {
	flex-basis: auto;  /* размер будет высчитываться в зависимости от содержания элемента */
} 
.container div:nth-of-type(2) {
	flex-basis: 100px;  /* размер для флекс элемента по умолчанию составляет 100px */
} 
.container2 div:nth-of-type(2) {
	flex-basis: 200px;  /* размер для флекс элемента по умолчанию составляет 200px */
} 
.container3 div:nth-of-type(2) {
	flex-basis: 10000px;  /* размер для флекс элемента по умолчанию составляет 10000px */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>auto</div>
			<div>100px</div>
			<div>auto</div>
		</div>
		<div class = "container2">
			<div>auto</div>
			<div>200px</div>
			<div>auto</div>
		</div>
		<div class = "container3">
			<div>auto</div>
			<div>10 000px</div>
			<div>auto</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. С использованием псевдокласса :nth-of-type() указали для каждого первого и третьего элемента в каждом контейнере, что их размер будет высчитываться в зависимости от содержания элемента. Для каждого второго элемента в контейнерах указали различные значения свойства flex-basis.

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

Результат примера:

Рис. 224 Пример использования свойства flex-basis

Уменьшение относительной ширины флекс элемента

Ранее мы с Вами рассмотрели как с помощью свойства flex-grow указать относительную ширину для флекс элементов и определить на сколько элемент может увеличиться по отношению к остальным флекс элементам. В CSS доступно и другое поведение для флекс элементов, при котором флекс элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства). За эту возможность отвечает свойтво flex-shrink.

Значение, определяющее на сколько будет уменьшен блок по отношению к остальным флекс элементам в контейнере (при недостатке свободного пространства) задается по аналогии со свойством flex-grow, но при этом значением по умолчанию будет 1, а не 0. Отрицательные значения так же не допускаются (не валидны).


Свойство flex-shrink со значением 0 определяет, что элемент не будет сжиматься, сохраняя при этом необходимую ширину элемента! Если вместе с этим значением указано минимальное значение ширины флекс элемента по умолчанию (свойство flex-basis), то элемент не сможет уменьшиться меньше этого значения. Используйте эту возможность осмысленно, так как существует вероятность переполнения содержимого флекс контейнера. Этот момент мы рассмотрим в конце статьи


Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-shrink</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	width: 400px;  /* устанавливаем ширину для контейнеров */
	height: 95px;  /* устанавливаем высоту для контейнеров */
	background: rgba(0,150,208,.3);  /* цвет заднего фона */
	margin-bottom: 5px;  /* внешние отступы снизу */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
	flex-basis: 200px;  /* размер для флекс элемента по умолчанию составляет 200px */
} 
.container div:nth-of-type(2) {
	flex-shrink: 2;  /* блок будет уменьшен на 2 по отношению к остальным флекс элементам (при недостатке пространства) */ 
} 
.container2 div:nth-of-type(2) {
	flex-shrink: 3;  /* блок будет уменьшен на 3 по отношению к остальным флекс элементам (при недостатке пространства) */ 
} 
.container3 div:nth-of-type(2) {
	flex-shrink: 4;  /* блок будет уменьшен на 4 по отношению к остальным флекс элементам (при недостатке пространства) */ 
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>2</div>
			<div>1</div>
		</div>
		<div class = "container2">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
		<div class = "container3">
			<div>1</div>
			<div>4</div>
			<div>1</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. Для контейнера мы задали ширину равную 400 пикселей, а для каждого вложенного флекс элемента с помощью свойства flex-basis указали размер по умолчанию равный 200px. Это было сделано для того, чтобы смоделировать ситуацию, при которой элемент у которого значение свойства flex-shrink больше остальных сжимался.

С использованием псевдокласса :nth-of-type() указали для каждого второго элемента в контейнерах различные значения свойства flex-shrink. В первом контейнере второй элемент при недостатке пространства будет уменьшен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре и всё это проиходит автоматически, не прибегая с нашей стороны к каким-то усилиям.

Результат примера:

Рис. 225 Пример использования свойства flex-shrink

Универсальное свойство flex

CSS свойство flex является короткой записью для свойств, которые позволяют определить размер для флекс элемента, установленный по умолчанию, указать на сколько элемент может увеличиться и уменьшиться по отношению к остальным флекс элементам в одном контейнере, а именно:

  • flex-grow (значение по умолчанию 0).
  • flex-shrink (значение по умолчанию 1).
  • flex-basis (значение по умолчанию auto).

Обратите внимание на некоторые нюансы использования свойства flex:

  • Если указывается одно числовое значение, то оно устанавливается для свойства flex-grow, если указаны единицы измерения CSS, то соответственно для flex-basis.
  • Если второе значение соответствует числовому значению, то оно устанавливается для flex-shrink, а если указаны единицы измерения CSS, то для flex-basis.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex</title>
<style> 
* {
	margin: 0;  /* внешние отступы со всех сторон отсутствуют */
	color: #fff;  /* цвет текста */
}
.content {    
	display: flex;  /* элемент отображается как блочный флекс контейнер */
	height: calc(100vh - 200px);  /* высчитываем высоту для элемента */
	background: #999;  /* цвет заднего фона */
}
section {
	display: flex;  /* элемент отображается как блочный флекс контейнер */
}
header, footer {
	height: 100px;  /* устанавливаем высоту для элементов */
	background: #777;  /* цвет заднего фона */
}
aside {
	flex: 1;  /* указываем на сколько элемент может увеличиться по отношению к остальным флекс элементам (flex-grow) */
}
main {
	background: #aaa;  /* цвет заднего фона */
	flex: 5 0 450px;  /* grow shrink basis */
}
section > div {  
	background: #333;  /* цвет заднего фона */
	margin: 5px;  /* внешние отступы со всех сторон */
	flex: 1 1 100px;  /* grow shrink basis */
	height: 100px;  /* устанавливаем высоту для элементов */
} 
</style>
</head>
	<body>
		<header>header</header>
		<div class = "content">
			<aside>aside</aside>
			<main>main
				<section>
					<div>div</div>
					<div>div</div>
					<div>div</div>
					<div>div</div>
				</section>
			</main>
			<aside>aside</aside>
		</div>
		<footer>footer</footer>
	</body>
</html>

В этом примере мы:

  • Разместили элемент <header> вверху страницы и <footer> внизу страницы, указали для них высоту равную 100 пикселям и определенный цвет заднего фона.
  • Элементу <div> с классом content указали, что он является блочным флекс контейнером и задали высоту, которая высчитывается с помощью функции calc() (100vh (viewport height) 100% от высоты области просмотра минус 200px, которые мы задали для элементов <header> и <footer>). Внутри контейнера мы разместили три флекс элемента: два элемента <aside> и один элемент <main>.
  • Для флекс элементов <aside> мы указали, что они будут увеличены на 1 по отношению к остальным флекс элементам, а элементу <main> указали значение 5, то есть он будет занимать 5 из 7 частей внутри контейнера (свойство flex-grow). Кроме того, внутри универсального свойства flex мы указали элементу <main> значение 0 свойства flex-shrink, и указали ширину элемента по умолчанию равную 450px (flex-basis). При таком сочетании свойств это означает, что элемент не будет сжиматься и его ширина не сможет уменьшится меньше 450 пикселей, что приведет при недостатке пространства к переполнению флекс контейнера.
  • Внутри флекс элемента <main> мы разместили элемент <section>, которому мы указали, что он является блочным флекс контейнером. Внутри него мы разместили четыре флекс элемента <div>. Для них мы указали, что они будут увеличены на 1 по отношению к остальным флекс элементам (свойство flex-grow), при недостатке пространства элементы будут уменьшены на 1 по отношению к остальным флекс элементам (значение по умолчанию свойства flex-shrink), и указали ширину элементов по умолчанию равную 100px (свойство flex-basis).

Результат примера:

Рис. 226 Пример использования свойства flex

Отправить ответ

avatar
  Подписаться  
Уведомление о