CSS от А до Я выравнивание текста по ширине и работа с Flexbox


Содержание материала:

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

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

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

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

Display: Flex

Вот пример страницы:

У нас есть 4 разноцветных div’а разных размеров, которые находятся внутри серого div’а. У каждого div’а есть свойство display: block . Поэтому каждый квадрат занимает всю ширину строки.

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

Вроде бы ничего особо и не изменилось — div’ы всего лишь встали в ряд. Но вы сделали что-то действительно мощное. Вы дали вашим квадратам классное свойство, называемое “flex-контекст”.

Flex Direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси: слева направо. Поэтому наши квадраты выровнялись в линию, когда мы применили display: flex . Однако flex-direction позволяет вращать главную ось.

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

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

Есть еще парочка свойств для flex-direction: row-reverse и column-reverse .

Justify Content

Justify-content отвечает за выравнивание элементов по главной оси.

Вернемся к flex-direction: row .

Justify-content может принимать 5 значений:

Space-between задает одинаковое расстояние между квадратами, но не между контейнером и квадратами. Space-around также задает одинаковое расстояние между квадратами, но теперь расстояние между контейнером и квадратами равно половине расстояния между квадратами.

Align Items

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.

Вернемся обратно к flex-direction: row и пройдемся по командам align-items :

Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:

Чтобы получше разобраться в том, как работают оси, давайте объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :

Align Self

Align-self позволяет выравнивать элементы по отдельности.

Давайте для двух квадратов применим align-self , а для остальных применим align-items: center и flex-direction: row .

Flex-Basis

Flex-basis отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами Flexbox:

Flex-basis влияет на размер элементов вдоль главной оси.

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

Заметьте, что нам пришлось изменить и высоту элементов. Flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

Flex Grow

Это свойство немного сложнее.

Для начала давайте зададим нашим квадратикам одинаковую ширину в 120px:

По умолчанию значение flex-grow равно 0. Это значит, что квадратам запрещено расти (занимать оставшееся место в контейнере).

Попробуем задать flex-grow равным 1 для каждого квадрата:

Квадраты заняли оставшееся место в контейнере. Значение flex-grow аннулирует значение ширины.

Но здесь возникает один вопрос: что значит flex-grow: 1 ?

Попробуем задать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные.

Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим квадратам:

Вначале flex-grow каждого квадрата равен 1, в сумме получится 6. Значит, наш контейнер поделен на 6 частей. Каждый квадрат будет занимать 1/6 часть доступного пространства в контейнере.

Когда flex-grow третьего квадрата становится равным 2, контейнер делится на 7 частей (1 + 1 + 2 + 1 + 1 + 1).

Теперь третий квадрат занимает 2/7 пространства, остальные — по 1/7.

Стоит помнить, что flex-grow работает только для главной оси (пока мы не поменяем ее направление).

Flex Shrink

Flex-shrink — прямая противоположность flex-grow . Оно определяет, насколько квадрату можно уменьшиться в размере.

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

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

Зададим flex-grow и flex-shrink равными 1:

Теперь давайте поменяем значение flex-shrink для третьего квадрата на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

Стоит помнить что flex-shrink основывается на пропорциях. То есть, если у квадрата flex-shrink равен 6, а у остальных он равен 2, то, это значит, что наш квадрат будет сжиматься в три раза быстрее, чем остальные.

Flex заменяет flex-grow , flex-shrink и flex-basis .

Значения по умолчанию: 0 (grow) 1 (shrink) и auto (basis) .

Создадим два квадрата:

У обоих квадратов одинаковый flex-basis . Это значит, что они оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding).

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

Как вещи растут и сжимаются

Когда увеличивается первый квадрат, он не становится в два раза больше второго квадрата, и когда уменьшается второй квадрат, он не становится в два раза меньше первого. Это происходит из-за того, что flex-grow и flex-shrink отвечают за темп роста и сокращения.

Немного математики

Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding, и у нас останется 600px, как раз для двух квадратов.

Когда ширина контейнера становится равной 430px (потеря в 210px), первый квадрат ( flex-shrink: 1 ) теряет 70px. Второй квадрат ( flex-shrink: 2 ) теряет 140px.

Когда контейнер сжимается до 340px, мы теряем 300px. Первый квадрат теряет 100px, второй — 200px.

Метод позиционирования элементов Flexbox

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

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

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

flex-direction Определяет направление главной оси. Возможные значения:

  • row – слева направо (по умолчанию);
  • row-reverse – справа налево;
  • column – сверху вниз;
  • column-reverse – снизу вверх.
flex-wrap Определяет многострочность контейнера. Возможные значения:

  • nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
  • wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
  • wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.
flex-flow Определяет сразу два параметра: flex-direction и flex-wrap.
Например, flex-flow: column wrap; justify-content Определяет выравнивание элементов по главной оси. Возможные значения:

  • flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу главной оси;
  • center – flex-элементы выравниваются по центру главной оси;
  • space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу;
  • space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.
align-items Определяет выравнивание элементов по поперечной оси. Возможные значения:

  • flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу поперечной оси;
  • center – flex-элементы выравниваются по центру поперечной оси;
  • baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
  • stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.
align-content Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения:

  • flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – строки flex-элементов прижимаются к концу поперечной оси;
  • center – fстроки flex-элементов выравниваются по центру поперечной оси;
  • space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя — к концу;
  • space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками.
  • stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

Это свойство не работает для однострочного flex-контейнера.

Свойства flex-элементов

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

flex-basis Определяет базовый размер flex-элемента перед распределением пространства в контейнере. Может быть задан в px, %, em и остальных единицах измерения. По сути это своего рода отправная точка, относительно которой происходит растягивание или сжатие элемента. Значение по умолчанию – auto, при этом размер элемента зависит от размера внутреннего контента.

В спецификации CSS Flexible Box Layout Module Level 1 приведена наглядная диаграмма для трех flex-элементов со значениями flex-grow 1, 1, 2 соответственно:

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

flex-shrink Определяет, на сколько в случае недостатка места будет уменьшаться flex-элемент относительно уменьшения соседних элементов внутри flex-контейнера. Задается целым числом, служащим пропорцией. По умолчанию равно 1. Если одному flex-элементу задать значение flex-shrink: 2, то из его базового размера вычтется в два раза больше, чем из других, если контейнер меньше, чем сумма базовых размеров входящих в него элементов.

flex Определяет сразу три параметра: flex-grow, flex-shrink, flex-basis.
Например, flex: 1 1 200px; align-self Переопределяет выравнивание, заданное по умолчанию или в align-items, для конкретного flex-элемента. Возможные значения:

  • flex-start – flex-элемент прижимается к началу поперечной оси (по умолчанию);
  • flex-end – flex-элемент прижимается к концу поперечной оси;
  • center – flex-элемент выравнивается по центру поперечной оси;
  • baseline – flex-элемент выравнивается по базовой линии;
  • stretch – flex-элементы растягивается, занимая все доступное место по поперечной оси. Но если задана высота, то stretch будет проигнорирован.

Особенности применения Flexbox на практике

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

Чтобы прижать заголовок сайта влево, а номер телефона вправо, то заголовку надо задать flex: 1.

Flexbox CSS — (Практика) #1

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

Flexbox CSS #1 — Практика выравнивания элементов

В текущем видео уроке разберем три основных свойства Flexbox CSS — display | justify-content | align-items . При помощи их можно выравнивать flex-элементы по горизонтали и вертикали.

Нам понадобится заготовка, можете ее скачать или набрать код самостоятельно.

Пробежимся по ее структуре заготовки. В index файле подключаю иконки через cdn, ниже подключаю файл стилей, а в теле body создан блок с классом dws-wrapper который служит оберткой всего контента. Файл стилей пустой, в папке img картинка на задний фон и изображение для примера.

Базовая разметка HTML

Начинаем как всегда с базовой разметки блоков. Нам понадобится контейнер, для него зададим класс img-box , в котором расположим следующие элементы. Изображение, заключаем в отдельный блок с классом img-wrapper , он будет для нее оберткой.

Для иконок сделаем UL, в нем четыре списка и в каждом расположим по ссылке.

Дописываем решетку в тег href , и подберем ряд иконок под нашу тематику.

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

На этом разметка HTML завершена, переходим к описанию стилей.

Описываем CSS стили

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

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

Давайте покажу, как это выглядит, к тому же закрепим пройденный материал.

Сейчас dws-wrapper является контейнером, притом обратите, какое пространство он занимает по высоте.

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

В тоже время flex-контейнер dws-wrapper занял всю ширину окна браузера.

Далее применяем свойство justify-content со значением center и flex-элемент выровнялся по центру.

Затем при помощи свойства align-items пытаемся выровнять его по вертикали, но безрезультатно. Потому что, высота flex-контейнера, это все-то пространство, которое занимает его элемент и для того что бы его выровнять по вертикали, нужно соответственно задать высоту окна браузера height: 900px .

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

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

В данном примере оставлю второй вариант, так как все же урок по flexbox , только уберу задний фон /*background: #ccc;*/, который задавал для примера. Взамен ему сделаем фон body .

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

Переходим к оформлению блока img-box и наша задача иконки расположить с правой стороны картинки. Тут нам поможет flexbox . В начале урока я говорил, что блок с классом img-box будет flex-контейнером, и полагаю, многие из вас зададут вопрос, что у нас может быть два flex-контейнера? Да почему бы нет! Хоть десять их наштопайте, это допустимо документацией и мы можем делать их многоуровневые вложенности.

Задаем для блока с классом img-box правило display: flex . Далее что бы выровнять элементы по вертикали пропишем свойство align-items и уберем обводку.

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

Приступим к оформлению первого элемента, это блок с картинкой. Отбираем его .img-wrapper img и задаем ширину в 300 пик., добавляем серую обводку.

Так как этот элемент будет, перемещается по наведению, добавим плавность при помощи transition .

Ниже описываем стили по наведению. Делаем закругление углов при помощи transform , сдвинем блок по оси X влево на 80 пик. и добавим фильтр.

Основному блоку .img-box пропишем свойство overflow: hidden что бы картинка при смещение по наведению не выходила за его пределы. Затем добавим бордюр с левой стороны, что бы изображение не выглядела, как обрезанное.

Убираем у картинки с левой стороны бордюр.

Вы, наверняка обратили внимание, что вложенный блок с картинкой немного меньше по высоте, о чем говорит выступ бордюра и если задать контейнеру .img-box обводку outline: 1px solid orange это станет заметнее.

Что бы исправить такое дело, делаем блок .img-wrapper flex-контейнером и картинка занимает все его пространство блока.

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

Далее переходим к оформлению списков с иконками.

Отображаем блок UL , отбираем его .img-box ul , скрываем маркеры, добавлю плавность анимации, задаем фон, обводку в два пикселя и закруглим углы.

Затем оформляем списки Li , делаем отступы, выравниваем иконки по горизонтали, и делаем разделители.

Последний разделитель нам не нужен, его сразу скрываем.

Затем оформляем иконки по наведению.

В заключение делаем плавную анимацию, делаем перемещение блока UL по наведению на изображение.

Проверяем, как все работает в комплексе.

Для того что бы блок с иконкой ушел на задний план, для картинки задаем z-index .

Временно все закомментируем и приступим к оформлению текстовых блоков. Отображаем текст, и позиционируем его относительно контейнера .img-box . Временно overflow: hidden закомментирую.

Затем задаем полупрозрачный фон красного цвета, цвет текста делаем белый, позиционируем с права 100 пик, с низу 70 пик., задаем внутренние отступы и плавность анимации в 1s.

Топ-пост этого месяца:  Насколько чист ваш веб-дизайн

Оформляем текст параграфа.

Заголовку добавляем text-transform .

Теперь делаем анимацию, текст смещаем на 200 пик. при помощи transform по оси X в левую сторону и делаем невидимым.

По наведению на блок .img-box отображаем текст при помощи transform , и перемещаем в изначальное положение.

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

Не появились блоки с текстом, для них зададим приоритетность z-index в два.

В принципе, закончили данный пример, получили такого рода анимация.

Верстка по Flexbox (работа с элементами).

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

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

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

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

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

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

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

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

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

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

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

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по пять элементов

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

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

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

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

Для первого элемента

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

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

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

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

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

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

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

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

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

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

Для первого элемента

Для второго элемента

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

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

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

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

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

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

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

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

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

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

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

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

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

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

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

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

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

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

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

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

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

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

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

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

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента

С использованием псевдокласса :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 .

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

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

  • Разместили элемент вверху страницы и внизу страницы, указали для них высоту равную 100 пикселям и определенный цвет заднего фона.
  • Элементу

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

Полное руководство по Flexbox – учимся на примерах

Опубликовано keynikel в 29.09.2020

Рубрики
Что еще почитать?
  • Подсказки о доступности подсказок 16.10.2020
  • Плейсхолдеры в полях делают больно 10.10.2020
  • Сборка Webpack 4 для чайников и сочувствующих 22.06.2020
  • Блок со скошенными углами на CSS 19.04.2020
  • Использование инлайн SVG-спрайтов в WordPress теме 13.09.2020

Какой самый лучший способ понять Flexbox? Изучить основы и написать кучу разных штук. Именно этим мы и займемся.

Но сначала стоит кое-что уточнить:

  • Эта статья написана для разработчиков среднего уровня и предполагает, что вы уже имеете представление о Флексбоксах. Но…
  • Если вы в курсе, что такое CSS, но не имели дела с Флексбокс, то здесь находится исчерпывающий гид по технологии (статья в открытом доступе, необходимо, примерно, 45 минут на чтение).
  • А если вы не особо хороши в CSS, то я рекомендую вам Полное (Практическое) введение в CSS(платный курс, 74 лекции, английский язык).
  • Примеры из статьи можно реализовывать в произвольном порядке.
  • Флексбокс – всего лишь технология разметки. Реальные проекты одной только разметкой не ограничиваются.
  • Обозначения типа div.ohans означают что это элемент div с классом ohans.

Пример 1. Как сделать фотогалерею на Флексбокс

Разместить фотографии по строкам и столбцам на Флексбокс гораздо проще, чем многим кажется.
Рассмотрим простую сетку:

У нас есть main.gallery и 10 изображений в нем.
Убедимся, что main.gallery растягивается на весь доступный экран:

Кое-что об изображениях

По умолчанию все изображения inline-block элементы. У них есть ширина и высота. Они выстроятся в линию (только если они не слишком большие и могут все поместиться)

На старт

Сейчас наша галерея будет выглядеть следующим образом:

Размеры всех 10 изображений остались нетронутыми. При необходимости картинки переместятся на вторую строку. Послушные ребята =)

А теперь, на сцену выходит Флексбокс:

С этого момента поведение изображений изменилось. Из inline-block элементов они стали flex-items.
В результате применения Флексбокс к .gallery все картинки уместились в одну линию. Да еще и растянулись по вертикали, вот так:

Картинки теперь уместились все в одну линию, да еще и растянулись по вертикали. Жалкое зрелище =(

Все это результат стандартного поведения Флексбокс:

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

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

Наша мощная флексбокс-галерея готова.

Преимущества использования Флексбокс

Сейчас преимущества использования Флексбокс не особо заметны, ведь тот же самый вид был и до его подключения.
Кроме легко получаемой адаптивности, преимущество флексбокс заключается в возможностях выравнивания.
Флекс-контейнер .gallery имеет несколько свойств для настройки выравнивания: flex-direction: row , justify-content: flex-start и align-items: flex-start.
Разметку галереи можно легко поменять поигравшись со следующим значением:

Flexbox в CSS

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

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» — приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox, создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся — логика наше все!

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

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

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

Начало и конец главной оси — элементы располагаются от начала и до конца контейнера.

Поперечная ось — направление движения элементов, когда они не умещаются в контейнер по направлению главной оси. Поперечная ось всегда перпендикулярна (⊥) главной.

Начало и конец поперечной оси — по поперечной оси заполняются ряды от начала и до конца контейнера. В каждом таком ряду располагаются элементы (читайте ниже).


  • Размер (главный и поперечный) — базовая величина по которой высчитывается ширина или высота внутренних элементов, если размер указан не точно (указан в процентах или не указан вообще, а элемент должен растянуться или сжаться).
  • Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

    После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (⊥), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (→), а кросс ось соответственно вертикальная и направлена сверху вниз (↓).

    Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (↓) и когда перестанут вмещаться в высоту то будут двигаться слева направо (→) — то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется — меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут — это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали. См. пример.

    Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы понять о чем речь, давайте представим что есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать по вертикали мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству align-content. А вот так это выглядит схематически:

    CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции. Тут используется другая модель построения макета и эти css свойства просто игнорируются.

    CSS свойства Flexbox

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

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

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

    flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

    Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

    • row (default) — направление элементов слева направо (→)
    • column — направление элементов сверху вниз (↓)
    • row-reverse — направление элементов справа налево (←)
    • column-reverse — направление элементов снизу вверх (↑)

    Нужно понимать, что при переходе с row на column или с row-reverse на column-reverse меняется только направление осей и больше ничего. Начало и конец расположения блоков остается неизменным (см. картинку в начале). Т.е. если при row элементы начинали свой путь справа/сверху, то при column все останется также — изменится только направление. (см. пример свойства flex-wrap)

    Управляет переносом непомещающихся в контейнер элементов.

    • nowrap (default) — вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
    • wrap — включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
    • wrap-reverse — тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

    меню

    flex-flow: direction wrap

    Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

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

    Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

    • flex-start (default) — элементы будут идти с начала (в конце может остаться место).
    • flex-end — элементы выравниваются по концу (место останется в начале)
    • center — по центру (место останется слева и права)
    • space-between — крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

    Заметка: Работает когда есть как минимум 2 ряда, т.е. при наличии только 1 ряда ничего не произойдет.

    Т.е. если flex-direction: row , то это свойство будет выравнивать невидимые ряды по вертикали ¦ . Тут важно заметить, что высота блока должна быть задана жестко и должна быть больше высоты рядов иначе сами ряды будут растягивать контейнер и любое их выравнивание теряет смысл, потому что между ними нет свободного места. А вот когда flex-direction: column , то ряды движется по горизонтали → и ширина контейнера почти всегда больше ширины рядов и выравнивание рядов сразу приобретает смысл.

    Это свойство мало где нужно и вместо него чаще используется align-items (см.ниже).

    • stretch (default) — ряды растягиваются заполняя строку полностью
    • flex-start — ряды группируются в верхней части контейнера (в конце может остаться место).
    • flex-end — ряды группируются в нижней части контейнера (место останется в начале)
    • center — ряды группируются по центру контейнера (место останется по краям)
    • space-between — крайние ряды прижимаются к краям (место между рядами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между рядами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

    • stretch (default) — элементы растягиваются заполняя строку полностью
    • flex-start — элементы прижимаются к началу ряда
    • flex-end — элементы прижимаются к концу ряда
    • center — элементы выравниваются по центру ряда
    • baseline — элементы выравниваются по базовой линии текста

    меню

    Для элементов контейнера

    Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.

    По умолчанию flex-grow: 0

    • Если всем элементам указать flex-grow:1 , то все они растянуться одинаково и заполнять все свободное место в контейнере.
    • Если одному из элементов указать flex-grow:1 , то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего.
    • При flex-grow:1 . Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
    • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
    • При flex-grow:3 . Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

    Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow:2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-grow:0.5

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

    По умолчанию flex-shrink:1

    Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px — flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-shrink:0.5

    Устанавливает базовую ширину элемента — ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px, em, rem, %, vw, vh и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. При auto элемент получает базовую ширину относительно контента внутри него.

    По умолчанию: auto

    Иногда лучше установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink . Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis. Пример смотрите в заметках.

    flex-basis будет «жестким», если обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; . Все это можно записать так flex:0 0 200px; .

    Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

    По умолчанию: flex: 0 1 auto

    Однако можно указать и одно, и два значения:

    Позволяет изменить свойство align-items , только для отдельного элемента.

    По умолчанию: от align-items контейнера

    • stretch — элемент растягиваются заполняя строку полностью
    • flex-start — элемент прижимаются к началу строки
    • flex-end — элемент прижимаются к концу строки
    • center — элемент выравниваются по центру строки

    baseline — элемент выравниваются по базовой линии текста

    Позволяет менять порядок (позицию, положение) элемента в общем ряду.

    По умолчанию: order: 0

    По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 . . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

    Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

    Чем отличается flex-basis от width?

    Ниже важные различия между flex-basis и width / height:

    flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). Смотрите пример.

    flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

    Абсолютные элементы контейнера не участвуют во flex конструкции. А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

  • При использовании свойства flex 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.
  • По возможности все же отдавайте предпочтение flex-basis . Используйте width только когда не подходит flex-basis .

    Отличие flex-basis от width — баг или фича?

    Контент внутри flex элемента распирает его и не может выйти за его пределы. Однако если установить ширину через width или max-width , а не flex-basis , то элемент внутри flex контейнера сумеет выйти за пределы этого контейнера (иногда нужно именно такое поведение). Пример:

    Примеры Flex верстки

    В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры смотрите в последних версиях Chrome или Firefox.

    #1 Простой пример с выравниванием по вертикали и горизонтали

    Начнем с самого простого примера — выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

    Или так, без блока внутри:

    #1.2 Разделение (разрыв) между элементами флекс блока

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

    #2 Адаптивное меню на flex

    Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #3 Адаптивные 3 колонки

    Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

    Обратите внимание, что сделать это можно без использования media правил, все на flex.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #4 Адаптивные блоки на flex

    Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #5 Галерея на flex и transition

    Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

    #6 Флекс во флекс (просто пример)

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

    Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат — текст начинался с одной линии.

    Еще примеры

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

    Полной поддержки разумеется нет, однако все современные браузеры поддерживают flexbox конструкции. Для некоторых все еще нужно указывать префиксы. Для реальной картины заглянем в caniuse.com и видим, что без префиксов будут работать 96.3% используемых сегодня браузеров, с префиксами 98.3%. Это отличный показатель для того чтобы смело использовать flexbox.

    Чтобы знать какие префиксы актуальны на сегодня (июнь. 2020), приведу пример всех flex правил с нужными префиксами:

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

    Chrome Safari Firefox Opera IE Android iOS
    20- (old) 3.1+ (old) 2-21 (old) 10 (tweener) 2.1+ (old) 3.2+ (old)
    21+ (new) 6.1+ (new) 22+ (new) 12.1+ (new) 11+ (new) 4.4+ (new) 7.1+ (new)
    • (new) — новый синтаксис: display: flex; .
    • (tweener) — старый неофициальный синтаксис 2011 года: display: flexbox; .
    • (old) — старый синтаксис 2009 года: display: box;

    меню

    Ну и не забывайте про видео, там порой тоже интересно и понятно. Вот парочка популярных:

    Полезные ссылки по Flex

    Flexplorer — наглядный конструктор flex кода.

    Выравнивание элементов во Flex контейнере

    На этой странице

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Выравнивание и flex-direction

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Полное руководство по Flexbox выравниванию

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

    История о двух осях

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

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

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

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

    Начнем с установки основной оси

    Направление основной оси определяется свойством flex-direction — существует четыре возможных значения:

    1. flex-direction: row; – основная ось идет слева направо (это значение по умолчанию)
    2. flex-direction: row-reverse; – основная ось идет справа налево
    3. flex-direction: column; – основная ось идет сверху вниз
    4. flex-direction: column-reverse; – основная ось идет снизу вверх

    Давайте посмотрим, как это выглядит в браузере. Я использую очень простую HTML-разметку, всего девять элементов, расположенных один над другим:

    Внешний div с классом .container будет flex контейнером, а внутренние div-вы с классом .item будут flex элементами.

    1. Слева направо: row

    Как уже упоминалось, в flex направление по умолчанию — row ; если вы ничего не установили, это и будет используемое значение. Как вы можете видеть ниже, я добавила свойства, относящиеся к flexbox, только к flex контейнеру. Flex элементы получили несколько свойств для декорации:

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

    2. Слева направо: row-reverse

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

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

    Если вы также хотите изменить направление поперечной оси, вам нужно использовать значение wrap-reverse для свойства flex-wrap . Посмотрите на отличия:

    3. Сверху вниз: column

    Когда flex-direction установлено как column , основная и поперечная оси меняют свои позиции. Основная ось будет проходить вертикально (сверху вниз), а поперечная ось будет идти горизонтально (слева направо).

    Теперь вы увидите, что нумерация элементов flex идет не в строку, а в столбец. Здесь одномерная природа flexbox, вероятно, наиболее заметна. Элементы будут перестраиваться только в том случае, если контейнеру задана фиксированная высота.

    4. Снизу вверх: column-reverse

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

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

    Опять же, чтобы изменить направление поперечной оси, вам нужно использовать wrap-reverse для свойства flex-wrap .

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

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

    Свойства выравнивания Flexbox

    Выравнивание в Flexbox может быть как по основной, так и по поперечной оси.

    Одно из свойств ( justify-content ) принадлежит главной оси, а остальные три ( align-items , align-self , align-content ) относятся к поперечной оси.

    Как и следовало ожидать, поведение свойств выравнивания зависит от свойства flex-direction. Например, justify-content выравнивает элементы горизонтально, если flex-direction установлено как row или row-revers , а также вертикально, если flex-direction установлено как column или column-revers . Это настоящая красота гибкого контейнера.

    Выравнивание вдоль основной оси

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

    1. flex-start — flex элементы расположены вначале основной оси (это значение по умолчанию)
    2. flex-end — flex элементы расположены в конце основной оси
    3. center — flex элементы расположены в центре основной оси
    4. space-between — flex элементы распределены равномерно вдоль основной оси, от flex-start до flex-end
    5. space-around — flex элементы равномерно распределены вдоль основной оси, но отступы половинного размера добавляются с каждого конца

    Чтобы правильно использовать свойство justify-content , вам нужно обратить внимание на направление ваших осей. Например, правило justify-content: flex-start; всегда располагает flex элементы в начале основной оси. Слева, когда flex-direction установлено как row , справа — когда установлено как row-revers , сверху — когда установлено как column и снизу — когда установлено как column-revers .

    Следующая codepen демонстрация показывает, как различные значения свойства justify-content выравнивают flex элементы, когда свойство flex-direction установлено как row .

    Выравнивание вдоль поперечной оси

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

    Однострочное выравнивание

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

    Оба могут принимать следующие значения:

    1. auto — заставляет свойство align-self наследовать значение align-items (по умолчанию для align-self)
    2. flex-start — flex элементы выровнены от начала поперечной оси
    3. flex-end — flex элементы выровнены от конца поперечной оси
    4. center — flex элементы выровнены по центру поперечной оси
    5. baseline — flex элементы выровнены от их базовой линии вверх
    6. stretch — flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (по умолчанию для align-items)

    Codepen ниже показывает, как свойства align-items и align-self ведут себя когда, flex-direction установлено как row . Поперечная ось по умолчанию проходит сверху вниз. Элементы имеют разные внутренние отступы (padding), чтобы изменить их высоты и базовые линии. Например, вы можете увидеть, что значение flex-start выравнивает элементы от начала поперечной оси, тогда как flex-end выравнивает их от конца.

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

    Многострочное выравнивание

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

    1. flex-start — flex элементы выровнены от начала поперечной линии
    2. flex-end — flex элементы выровнены от конца поперечной оси
    3. center — flex элементы выровнены по центру поперечной оси
    4. space-between — flex элементы распределены равномерно вдоль поперечной оси между flex-start и flex-end
    5. space-around — flex элементы распределены равномерно вдоль поперечной оси, но отступы половинного размера добавляются с каждого конца
    6. stretch — flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (это значение по умолчанию)

    Ниже вы можете увидеть различные демонстрации в codepen, показывающие, как работают разные значения свойства align-content . Как и в случае с нашими другими демонстрациями, применено направление оси по умолчанию.

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

    Если вы поняли все, что мы до этого прошли, то вы очень хорошо потрудились. Теперь у вас есть хорошее базовое понимание flexbox выравнивания.

    Заключение

    Мы закончили! Напомню: самое главное, что необходимо помнить, это то, что вам нужно учитывать направления основной и поперечной осей. Всегда начинайте выравнивание, с установки свойства flex-direction . Чтобы узнать больше о flexbox выравнивании и применить свои знания на практике, вы можете посмотреть следующие ресурсы:

    • Официальная документация W3C по flexbox выравниванию Тяжелое, но полезное чтиво; также документация по flexbox.
    • Как выровнять элементы в контейнере Flex. Страница документов MDN с интерактивными демонстрационными примерами и примерами кода.
    • Памятка по Flexbox от Joni Trythall. Хорошая PDF-шпаргалка для загрузки, с виноградом, грушами и апельсинами.
    • Flexbox Froggy Онлайн-игра для изучения flexbox, с лягушками и лилиями. Если вы хотите подбирать flexbox выравнивание интуитивно, попробуйте эту игру (вы можете попробовать все, что мы рассмотрели в этом уроке).

    Про CSS

    Flexbox

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

    UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

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

    Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

    Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

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

    Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси.

    Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

    Приготовим полигон для экспериментов:

    Один родительский блок (желтый) и 5 дочерних.

    Display: flex

    И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

    display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

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

    Свойство display для Flexbox может принимать два значения:

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

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

    Flex-direction

    Направление раскладки блоков управляется свойством flex-direction .

    row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

    row и row-reverse

    column и column-reverse

    Flex-wrap

    В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

    nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

    Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

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

    flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

    Демо для row-reverse wrap-reverse :

    Order

    Для управления порядком блоков служит свойство order .

    Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

    Justify-content

    Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

    justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

    justify-content отвечает за выравнивание по главной оси.

    Возможные значения justify-content :

    flex-start — элементы выравниваются от начала главной оси (значение по умолчанию); flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.

    flex-start и flex-end

    Align-items

    align-items отвечает за выравнивание по перпендикулярной оси.

    Возможные значения align-items :

    flex-start — элементы выравниваются от начала перпендикулярной оси; flex-end — элементы выравниваются от конца перпендикулярной оси; center — элементы выравниваются по центру; baseline — элементы выравниваются по базовой линии; stretch — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).

    Align-self

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

    Возможные значения align-self :

    auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start — элемент выравнивается от начала перпендикулярной оси; flex-end — элемент выравнивается от конца перпендикулярной оси; center — элемент выравнивается по центру; baseline — элемент выравнивается по базовой линии; stretch — элемент растягивается, занимая все пространство по высоте.

    Align-content

    Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

    flex-start — элементы выравниваются от начала главной оси; flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя; stretch — элементы растягиваются, заполняя всю высоту (значение по умолчанию).

    Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

    Элементы стоят столбиком, но не переносятся:

    Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

    Думаю, со временем заработает.

    UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

    CSS: Выравнивание текста

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

    • left — выравнивает текст по левому краю.
    • right — выравнивает текст по правому краю.
    • center — выравнивает текст по центру.
    • justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

    Попробовать »

    Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

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