Свойство flex-basis auto


Содержание

CSS flex-basis Свойство

Пример

Установите начальную длину второго гибкого элемента на 100 пикселей:

Определение и использование

Свойство flex-basis указывает начальную длину гибкого элемента.

Примечание: Если элемент не является гибким элементом, свойство flex-basis не имеет эффекта.

Значение по умолчанию: auto
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.flexBasis=»200px»

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

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

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Полное руководство по Flexbox

Предисловие

Модуль Flexbox Layout (Flexible Box) направлен на то чтобы предоставить более эффективный способ расположения, выравнивания и распределения свободного пространства между элементами в контейнере, даже когда их размер заранее неизвестен и/или динамичен (поэтому слово «flex»).

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

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

Примечание. Flexbox больше подходит для компонентов приложения и небольших макетов, тогда как CSS Grid предназначен для более масштабных макетов.

Основы и терминология

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

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на «flex-flow направлениях». Пожалуйста взгляните на этот рисунок из спецификации, объясняющий основную идею Flexbox.

В основном элементы будут располагаться вдоль основной оси (от main-start к main-end ) или попереченой оси (от cross-start к cross-end ).

  • main axis — это основная ось flex-контейнера, вдоль которой расположены flex-элементы. Берегитесь того, что это не обязательно горизонтальная ось; Она зависит от свойства flex-direction;
  • main-start | main-end — flex-элементы размещаются внутри контейнера, начиная с main-start и заканчивая main-end ;
  • main size — ширина или высота flex-элемента, в зависимости направления основной оси;
  • cross axis — это ось перпендикулярная основной оси, которая называется «поперечной» осью. Её направление зависит от направления основной оси;
  • cross-start | cross-end — — flex-элементы размещаются внутри контейнера, начиная с cross-start и заканчивая cross-end ;
  • cross size — ширина или высота flex-элемента, в зависимости направления поперечной оси;

CSS свойство flex-basis

Свойство flex-basis задает базовую ширину флекс-элемента, относительно которой будет происходить растяжение (свойство flex-grow) или сужение (свойство flex-shrink) элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.

CSS синтаксис

Возможные значения

Значение Описание
ширина Ширина элемента задается в px, %, em и других единицах измерения CSS.
auto Значение по умолчанию. Элемент получает базовую ширину, соответствующую ширине контента внутри него, если она не задана явно.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем начальную ширину каждого второго флекс-элемента в 80px

Как работает 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 не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

В чем разница между flex-basis и w >

Собственно, вопрос в сабже, иллюстрирую пример.

Работают оба вариванта, в чем же отличие?

  • Вопрос задан более двух лет назад
  • 8360 просмотров

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

Flex-basis дает гораздо больше возможностей для красивой адаптации макета на мобильные разрешения, например когда контейнер перестает быть row и становится column, или наоборот.

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 кода.

    Полное руководство по свойствам размеров Flexbox

    Дата публикации: 2020-02-18

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

    В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex.

    Заполнение свободного пространства

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

    Свойства размеров Flexbox позволяют принимать решения в трех видах сценариев:

    flex-grow: как должны вести себя flex-элементы при избытке свободного пространства (как они должны растягиваться).

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    flex-shrink: как должны вести себя гибкие элементы при нехватке свободного места (как они должны сжиматься).

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

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

    1. Положительное свободное пространство: flex-grow

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

    CSS-свойства для flex-элементов

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

    Свойство flex-basis

    Свойство flex-basis задает базовый размер flex-элемента по главной оси. Значение может быть указано в любых единицах измерения CSS, таких как проценты, пиксели и т. д. В качестве значения также принимается ключевое слово auto — тогда на размеры элемента влияют свойства width / height либо контент, который в нем содержится.

    Свойство flex-grow

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

    Разберемся, как работает свойство flex-grow. По умолчанию дочерние элементы flex-контейнера выстраиваются друг за другом горизонтально. Если места не хватает, flex-элементы сужаются. Но если места достаточно, элементы не растягиваются — вы можете сами решать, насколько сильно они будут растянуты. Свойство flex-grow определяет, каким образом оставшееся свободное место распределяется между flex-элементами, и какая доля этого пустого пространства отводится для каждого из них. Иными словами, положительное свободное пространство «раздается» flex-элементам в указанных пропорциях (в зависимости от их значения flex-grow).

    Для примера: если для всех flex-элементов установлено значение flex-grow: 1 , а один из них получил значение flex-grow: 2 , то он займет в два раза больше свободного места, чем элементы со значением flex-grow: 1 . Обратите внимание, что размер самого элемента не будет вдвое увеличен.

    Свойство flex-shrink

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

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

    Свойство flex

    Свойство flex является короткой записью и объединяет в себе три свойства: flex-grow , flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink и flex-basis ) опциональны. По умолчанию установлены следующие параметры:

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

    Свойство align-self

    Свойство align-self позволяет переопределить выравнивание по умолчанию (либо перезаписать значение, заданное свойством align-items ) для отдельных flex-элементов.

    Свойство align-self принимает те же значения, что и align-items :

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

    Свойство order

    По умолчанию flex-элементы выводятся на странице в исходном порядке (т. е. в котором они расположены в HTML). При помощи свойства order можно управлять порядком вывода flex-элементов в контейнере. В качестве значения задается целое число, которое означает вес позиции. Чем меньше число, тем выше позиция.

    На примере ниже показано, каким образом работает свойство order . Элемент «Default» выводится первым, потому что у него вес 0 (и это значение по умолчанию). Следом за ним идет элемент «First» с весом 1 , затем — элемент «Second» с весом 6 , и в конце — элемент «Third» с весом 99 .

    Бонус: вертикальное центрирование

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

    Свойства, которые игнорируются во Flexbox

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

    • Свойства float и clear не оказывают влияния на flex-элементы и не исключают их из потока.
    • Свойство vertical-align не влияет на flex-элементы.
    • Псевдоэлементы ::first-line и ::first-letter не применяются к flex-контейнеру.
    • «Схлопывание» margin не работает во flex-потоке.

    Завершение

    Модуль Flexible Box однозначно полезен для построения разметки и намного более удобен, чем другие способы создания макета. Рекомендуем поближе познакомиться с flexbox, а также разобраться в том, как он работает, поскольку данный модуль уже набрал популярность и активно используется разработчиками.

    Далее в учебнике: позиционирование элементов в CSS.

    Frontender Magazine

    Модуль Flexbox-лейаута (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).

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

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

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

    Основы

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

    Если обычный лейаут основывается на направлениях потоков блочных и инлайн-элементов, то flex-лейаут основывается на «направлениях flex-потока». Ознакомьтесь с этой схемой из спецификации, разъясняющей основную идею flex-лейаутов.

    В основном элементы будут распределяться либо вдоль главной оси (от main-start до main-end), либо вдоль поперечной оси (от cross-start до cross-end).

    • main-axis — главная ось, вдоль которой располагаются flex-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства flex-direction (см. ниже).
    • main-start | main-end — flex-элементы размещаются в контейнере от позиции main-start до позиции main-end.
    • main size — ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента.
    • cross axis — поперечная ось, перпендикулярная к главной. Её направление зависит от направления главной оси.
    • cross-start | cross-end — flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end .
    • cross size — ширина или высота flex-элемента в зависимости от выбранной размерности равняется этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.

    Свойства

    display: flex | inline-flex;

    Применяется к: родительскому элементу flex-контейнера.

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

    • CSS-столбцы columns не работают с flex-контейнером
    • float , clear и vertical-align не работают с flex-элементами

    flex-direction

    Применяется к: родительскому элементу flex-контейнера.

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

    • row (по умолчанию): слева направо для ltr , справа налево для rtl ;
    • row-reverse : справа налево для ltr , слева направо для rtl ;
    • column : аналогично row , сверху вниз;
    • column-reverse : аналогично row-reverse , снизу вверх.

    flex-wrap

    Применяется к: родительскому элементу flex-контейнера.

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

    • nowrap (по умолчанию): однострочный / слева направо для ltr , справа налево для rtl ;
    • wrap : многострочный / слева направо для ltr , справа налево для rtl ;
    • wrap-reverse : многострочный / справа налево для ltr , слева направо для rtl .

    flex-flow

    Применяется к: родительскому элементу flex-контейнера.

    Это сокращение для свойств flex-direction и flex-wrap , вместе определяющих главную и поперечную оси. По умолчанию принимает значение row nowrap .

    justify-content

    Применяется к: родительскому элементу flex-контейнера.

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

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

    align-items

    Применяется к: родительскому элементу flex-контейнера.

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

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

    align-content

    Применяется к: родительскому элементу flex-контейнера.

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

    Замечание: это свойство не работает с однострочным flexbox.

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

    order

    Применяется к: дочернему элементу / flex-элементу.

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

    flex-grow

    Применяется к: дочернему элементу / flex-элементу.

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

    Если у всех элементов свойство flex-grow задано как 1 , то каждый потомок получит внутри контейнера одинаковый размер. Если вы задали одному из потомков значение 2 , то он заберёт в два раза больше места, чем другие.

    Отрицательные числа не принимаются.

    flex-shrink

    Применяется к: дочернему элементу / flex-элементу.

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

    Отрицательные числа не принимаются.

    flex-basis

    Применяется к: дочернему элементу / flex-элементу.

    Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

    Применяется к: дочернему элементу / flex-элементу.

    Это сокращение для flex-grow , flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink , flex-basis ) необязательны. Значение по умолчанию — 0 1 auto .

    align-self

    Применяется к: дочернему элементу / flex-элементу.

    Позволяет переопределить выравнивание, заданное по умолчанию или в align-items , для отдельных flex-элементов.

    Обратитесь к описанию свойства align-items для лучшего понимания доступных значений.

    Примеры

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

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

    Теперь давайте используем какие-нибудь свойства. Представьте набор из 6 элементов фиксированного размера (для красоты), но с возможностью изменения размера контейнера. Мы хотим равномерно распределить их по горизонтали, чтобы при изменении размера окна браузера всё выглядело хорошо (без @media -запросов!).

    Готово. Всё остальное — уже дело оформления. Ниже размещён CodePen, демонстрирующий этот пример. Обязательно попробуйте растянуть/сжать окно браузера и посмотрите, что произойдёт.

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

    Давайте попробуем кое-что получше и поиграем с гибкостью flex-элементов! Как насчёт ориентированного на мобильные устройства трёхколоночного макета с полноширинной шапкой и подвалом? И другим порядком расположения.

    Похожие свойства

    Другие ресурсы

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

    • (modern) означает поддержку нового синтаксиса из спецификации ( display: flex; )
    • (hybrid) означает поддержку старого неофициального синтаксиса из 2011 ( display: flexbox; )
    • (old) означает поддержку старого синтаксиса из 2009 ( display: box; )
    Chrome Safari Firefox Opera IE Android iOS
    21+ (modern)
    20- (old)
    3.1+ (old) 2-21 (old)
    22+ (new)
    12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

    Браузер Blackberry версии 10+ поддерживает новый синтаксис.

    Для более подробной информации о том, как и когда использовать различные синтаксисы для обеспечения лучшей поддержки браузерами, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).

    Разница между width и flex-basis

    Это очень важный момент в вёрстке на flexbox и он никак не отменяет того, что эту разницу нужно знать, понимать и грамотно применять.

    Пока что это самый популярный вопрос который меня спрашивали. На самом деле я и сам гуглил про эту штуку в начале понимания флексов. Там были такой запрос “ flex-basis vs width vs min-width” и так 4 раза! Не хило. Но давайте разберемся с этим вопросом и возможно избавим вас от подобным запросов в будущем.

    Формула flex-элементов

    content → width → flex-basis (ограниченный max|min-width)

    Для определения размера flex-элемента, flex-basis ограничивается min-width и max-width . В общем, это всё что нужно.

    Обратите внимание, что спека flexbox говорит о том, что это “потенциальный основной размер”, но куда проще рассматривать это как конечный flex-basis .

    Если flex-basis не указан, то он опирается на свойство width этого же элемента.

    А если уже и width не указан, то flex-basis опирается ширину, посчитанную по контенту.

    Давайте покажем как работает эта формула, вставив несколько flex-элементов во flex-контейнер шириной 1000px:

    Выставляем w >Давайте положим несколько 200px x 200px элементов, которые задают ширину нашему flex-контейнеру.

    У нашего flex-контейнера есть ещё немного места. Так что всё в него успешно помещается:

    В этом примере, flex-basis у элементов не был указан, так что по-дефолту он стоит flex-basis: auto , что берет за основу ширину (200px).

    Пока что, указание width равно выставлению flex-basis .

    Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
    Вы можете его поддержать через Яндекс.Деньги. Спасибо.

    Выставляем flex-basis

    Давайте посмотрим что случится, когда мы выставим flex-basis этим элементам, у которых уже указан width .

    Как вы видите, когда указан flex-basis , width наших боксов игнорируется, так что нам даже и не нужно его указывать:

    Наш окончательный flex-basis для каждого элемента равен 250px. И пока у нас достаточно места, чтобы их уместить, они отлично поместятся в flex-контейнере.

    Помните формулу flex-элементов:

    content → width → flex-basis (ограничивается max|min-width)

    Единственное, что реально важно, это конечный flex-basis . Лучшей практикой является использование просто flex-basis , вместо width и height . Особенно учитывая Safari, который до сих пор имеет баг, в котором не применяется flex-shrink на элементах, который используют height вместо flex-basis .

    Flex-basis ограниченный max-w >Конечное значение flex-basis ограничено min-width и max-width элемента. Смотрите, что происходит когда мы указываем max-width ограничение нашим flex-элементам:

    Хоть и flex-basis был выставлен 250px, он превышает указанный лимит max-width лимит в 100px. Так что, нашим окончательным flex-basis, в этом случае будет 100px и наши элементы будут располагаться в контейнере таким образом:

    Теперь давайте выставим min-width и посмотрим как оно ограничит наш flex-basis в формировании размера:

    Хоть мы и указали 100px нашему flex-basis , он не может быть меньше, чем ограничение в 250px, указанное в min-width . Так что, наши элементы идеально поместятся в контейнер:

    Так что же такое flex-basis?

    Теперь мы понимаем, что w >flex-basis отсутствует, а min-width и max-width это просто ограничения для формирования окончательного размера flex-basis . Но что же такое flex-basis ?

    Возможно, вы уже обратили внимание на то, что на всех изображениях, размер элементов указан перед тем как они попадут в контейнер. Мы так сделали, потому что это именно то, чем является flex-basis: размер flex-элементов перед тем, как они разместятся в контейнере. Это идеальный или предположительный размер элементов. Но flex-basis это не гарантированный размер! Как только браузер поместит элементы в контейнер, всё поменяется. На некоторых примерах выше, вы видели то, что flex-элементы идеально подходят под контейнер, потому что общая сумма всех flex-basis равна указанной ширине нашего контейнера (1000px). Хорошо, когда так, но зачастую у flex-контейнера нет достаточного места или у него появляется дополнительное место, после того, как добавятся все значения flex-basis .

    Когда недостаточно места

    Предположим, что нам надо вставить ещё больше элементов с flex-basis: 200px в наш контейнер:

    Илон Маск рекомендует:  right в CSS
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL