Флекс css: flex-grow — CSS | MDN

что это простыми словами, где применяется в CSS

Содержание

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

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

Логотип Flexbox

В верстке есть такое понятие, как сетка, или лэйаут (layout). Это то, как блоки — крупные и мелкие — расположены на странице. Списки, наборы ссылок, виджеты и статьи — все это распределено по веб-странице не хаотично, а по определенной структуре. Эта структура и есть сетка. Flex — один из способов ее задать.

Flexbox появился в CSS 3.0. До него для построения сеток использовали таблицы и float’ы — команды для смещения элементов в сторону.

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

Flexbox расшифровывается как Flexible Box — гибкий ящик или блок. Гибкость — основная идея этого способа. Читается как «флексбокс» или просто «флекс».

Курс Frontend- разработчик PRO Получите перспективную творческую профессию и знания уровня middle. Вы изучите JavaScript и TypeScript. За время обучения вы выполните 5 проектов на JavaScript и получите 13 проектов в портфолио.

Подробнее

Кто пользуется Flexbox

• Верстальщики — позиционирование элементов с помощью языка стилей CSS относится к верстке, и в некоторых компаниях этим занимаются отдельные сотрудники.
• Фронтенд-разработчики
  — другой подход в коммерческой разработке подразумевает, что версткой занимаются фронтендеры и они же «оживляют» интерфейсы с помощью JavaScript.
• Фуллстак-разработчики — им тоже следует понимать, как работает верстка, хотя сталкиваются они с ней реже, чем предыдущие два специалиста.
• Другие сотрудники — эпизодические задачи по верстке могут появляться у специалистов техподдержки, контент-менеджеров и прочих специалистов. Но они сталкиваются с такой необходимостью редко.

Для чего нужен Flexbox

Flexbox — один из двух современных методов построения сеток страницы. Сетка — своеобразный каркас, который описывает, как расположены элементы. Благодаря ей веб-страницы выглядят понятно и аккуратно, а блоки не «плывут» вразнобой. Флексы используют для построения больших и малых сеток.

• Большие, основные сетки — это те, которые описывают положение крупных блоков. Например, это заголовки, текстовые блоки, боковые блоки со ссылками и виджетами и так далее.
• Малые, микросетки — это сетки внутри крупных блоков. Они описывают, как в них располагаются более маленькие элементы: ссылки, тексты, картинки и так далее.

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

Как работает Flexbox

Принцип работы флексбокса — выстраивание элементов внутри какого-то крупного блока по прямой оси. Распределение и поведение этих элементов описывает верстальщик.

Создание контейнера. Крупный блок, внутри которого расположены элементы, называется флекс-контейнером. Чтобы превратить блок во флекс-контейнер, нужно задать для него CSS-свойство:

display: flex;

Эту команду можно прочитать как «способ отображения: флексбокс». После этого все, что находится внутри контейнера, будет подчиняться правилам флекса — превратится во флекс-элементы. Но это касается только прямых потомков — блоков непосредственно в контейнере. Если внутри них тоже вложены какие-то элементы, на них правила не распространятся.

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

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

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

Можно изменять расположение элементов на оси, но привязка к ней все равно останется. Это ключевая особенность флексбокса.

Отсутствие строгих параметров. Еще одно важное свойство флекса — чтобы определить положение элементов, не обязательно строго задавать их координаты. Флексбокс автоматически заполняет все возможное пространство внутри флекс-контейнера: для этого он может сжимать или расширять элементы, изменять отступы между ними. Главное — чтобы соблюдались правила, которые задал человек.

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

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

Изменение параметров. Для каждого параметра — особенностей отображения и поведения элементов, изменения оси и так далее — есть свое CSS-свойство. Нужно применить его к требуемому флекс-контейнеру или флекс-элементу — прописать это свойство с нужными значениями.

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

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

Какие возможности дает Flexbox

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

Изменять ось. С помощью команды flex-direction можно изменить направление оси. У команды есть четыре значения:

• row — ряд, горизонтальная линия слева направо;
• reverse-row — ряд справа налево;
• column — колонка, вертикальная линия сверху вниз;
• reverse-column — колонка снизу вверх.

Чаще всего пользуются значениями row и column. Row хорошо подходит для горизонтальных меню, списков и так далее — элементов, которые расположены «в строку». А column — для наборов элементов, расположенных вертикально, «в столбик».

Выстраивать элементы по оси. Когда нужное направление оси указано, элементы автоматически выстроятся вдоль него. По умолчанию они прижаты к левому или верхнему краю оси в зависимости от ее направления — горизонтального или вертикального. Но способ построения можно изменить с помощью свойства justify-content, выровнять контент.

У него есть такие значения:

• flex-start или просто start — выравнивать по «начальной точке» оси, то есть по левому краю для row или по верхнему для column;
• flex-end или end — выстраивать по «конечной точке», правой или нижней;
• center — концентрировать элементы в центре;
• space-between — прижимать крайние элементы к левому и правому краям, а элементы между ними распределять равномерно;
• space-around — то же самое, но с отступами от левого и правого края для крайних элементов. Каждый отступ от края в два раза меньше, чем отступы между элементами;
• space-evenly — то же самое, но отступы от краев такие же, как между элементами.

На практике чаще всего используют значения start, center и space-between. Последнее удобно, например, для создания горизонтальных меню — они должны тянуться по всей ширине страницы. Но тут есть нюанс, о котором мы поговорим позже.

Выравнивать элементы. Можно выстроить элементы не только вдоль оси, но и «поперек» нее: для row — по вертикали, для column — по горизонтали. Поведение описывается свойством align-items.

Его значения похожи на justify-content, но все же отличаются:

• stretch — элементы растягиваются поперек оси и заполняют все свободное пространство по обе стороны от нее;
• start — элементы сохраняют свой размер и выравниваются по верхнему или левому краю;
• center — элементы группируются по центру. Можно сказать, что их центральная часть «закреплена» на оси;
• end — элементы выравниваются по нижнему или правому краю;
• baseline — выравнивание происходит по «базовой линии» контента.

Помните, что в этом случае речь идет не об основном, а о вспомогательном направлении. То есть, если ось идет горизонтально (row), то свойство align-items будет распределять элементы в ряду по вертикали, и наоборот — для column.

Изменять поведение контента и элемента.

Кроме align-items, также есть похожие свойства, но управляющие немного другими сущностями:

• order определяет порядок расположения — где будет находиться конкретный элемент;
• align-content похоже на align-items, работает только для многострочных контейнеров — там, где элементы переносятся на другую строку. Это свойство определяет расположение строк относительно контейнера. Значения у него такие же, как у justify-content;
• align-self — это align-items для отдельного элемента. Свойство задается не контейнеру, а одному из элементов внутри него. Оно «переписывает» значение align-items для конкретного элемента. Например, все остальные могут быть растянуты по stretch, а один, измененный с помощью align-self, — располагаться по центру (center).

Напрашивается идея с justify-self, но во флексбоксе такое свойство не работает — расположение каждого из элементов на оси слишком зависит от других. Зато оно есть в других способах распределения.

Управлять переносом элементов. Что, если элементов станет слишком много и они не поместятся на оси? В таком случае есть два варианта поведения:

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

Этим поведением управляет свойство flex-wrap. По умолчанию его значение — nowrap, то есть не переносить, а сжимать. Если указать значение wrap, элементы будут переноситься на другую строку, а wrap-reverse — будут переноситься, но в противоположном направлении. То есть новая строка возникнет не снизу, а сверху.

Какое поведение выбрать — зависит от ситуации. Иногда элементы просто не могут достаточно сжаться, и тогда при nowrap они «сломаются» и «выпадут» за пределы сетки.

В таком случае лучше выбирать wrap. А иногда разработчик точно знает, что добавлять новые элементы в это место не будут, — тогда подойдет и nowrap.

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

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

Эти свойства нужны, когда важно сделать какой-то элемент больше или меньше других.

Для каких элементов обычно используют Flexbox

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

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

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

Преимущества Flexbox

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

Адаптивность. Flex отлично подходит для создания «резиновой» верстки, когда размеры элементов меняются в зависимости от параметров экрана. Такая верстка — хорошая практика по сравнению со статической, потому что лучше выглядит на разных устройствах. У нее ниже риск «развалиться» и стать нефункциональной.

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

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

Адаптация под разные языки. Выше мы рассказывали про значения reverse-row, reverse-column и reverse-wrap и говорили, что они используются редко. Но это справедливо только для латиницы и кириллицы. Во многих языках практикуется чтение справа налево — эти свойства отлично подходят для адаптации веб-страниц под такие языки. Особенно удобно, если страница существует на разных языках с разными способами чтения: например, на английском и фарси.

Риск «выпадания». Флекс не универсален. Большинство его минусов связано с позиционированием элементов. Из-за того, что оно автоматическое, возможны ситуации, когда что-то ломается или выпадает. Если такое случится, верстка станет непригодной к использованию.

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

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

Риск «расползания верстки». Есть и еще одна ситуация — явление, когда при определенных условиях элементы начинают располагаться некрасиво. Выше мы рассказывали, что свойство space-between хорошо подходит для «растягивания» элементов в горизонтальном меню и что тут есть деталь. Это один из примеров такого поведения.

Горизонтальное меню со space-between смотрится отлично, пока его пунктов не становится много. Включается защита от переполнения, и лишние пункты переносятся на другую строку. И тут space-between играет плохую службу: если лишних пунктов два, они «приклеиваются» к краям контейнера, а по центру остается пустая область. А изменить расположение элементов только по одной строке нельзя.

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

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

Как начать пользоваться Flexbox

Сетки и флексы — это та часть верстки, к которой стоит переходить уже после ознакомления с основами HTML и CSS. Без знания базовых принципов разобраться в особенностях флексбокса может быть сложно. Но основ достаточно, чтобы начать тренироваться: есть иллюстрации, демотренажеры и даже игра для лучшего понимания флекса.

Узнать больше про верстку и фронтенд вы можете на наших курсах. Получите новую интересную профессию — станьте востребованным специалистом!

Курс Frontend- разработчик PRO Получите перспективную творческую профессию и знания уровня middle. Вы изучите JavaScript и TypeScript. За время обучения вы выполните 5 проектов на JavaScript и получите 13 проектов в портфолио.

Подробнее

Другие термины на букву «F»

Flask
FTP
FYI

← Все термины

Полное руководство по CSS Flex + опыт использования / Хабр

Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него.

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

Это все, на что способен Flex.

Но… давайте рассмотрим каждую диаграмму отдельно. К концу этого руководства по Flex вы узнаете обо всех его возможностях.

CSS Flex или Flex Box

Flex — это набор правил для автоматического растягивания нескольких столбцов и строк внутри родительского контейнера.

display:flex

В отличие от многих других свойств CSS, в Flex есть основной контейнер и вложенные в него элементы. Некоторые свойства CSS-Flex относятся только к контейнеру. А другие можно применить только к элементам внутри него.

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

Горизонтальная (main) и вертикальная (cross) оси

Хотя список элементов представлен линейно, необходимо обращать внимание на строки и столбцы. По этой причине Flex включает в себя координатные оси. Горизонтальная ось называется main-axis, а вертикальная — cross-axis.

Чтобы управлять шириной содержимого контейнера и промежутками между элементами, которые растягиваются вдоль main-axis, необходимо использовать Justify-content. Для управления вертикальными изменениями элементов необходимо использовать align-items.

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

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

Вы можете определять количество столбцов.

Распределение строк и столбцов внутри родительского элемента определяется свойствами CSS Flex flex-direction, flex-wrap и некоторыми другими, которые будут продемонстрированы дальше.

:У нас есть произвольное n-количество элементов, расположенных в контейнере. По умолчанию элементы растягиваются слева направо. Однако направление можно изменить.

Direction

Можно задать направление движения элементов (по умолчанию слева направо).

flex-direction: row-reverse изменяет направление движения списка элементов. По умолчанию стоит значение row, что означает движение слева направо.

Wrap

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

Flow

flex-flow включает в себя flex-direction и flex-wrap, что позволяет определять их с помощью одного свойства.

Примеры:

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

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

justify-content

Я получил много просьб прояснить приведенный выше пример. Для этого я создал анимацию:

Анимированные возможности justify-content.

Надеюсь, эта CSS-анимация поможет лучше понять работу justify content.

Свойства следующие:flex-direction:row; justify-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly. В этом примере мы используем только 3 элемента в строке.

Нет никаких ограничений на количество элементов, которые можно использовать в Flex. Эти диаграммы демонстрируют только поведение элементов, когда одно из перечисленных значений применяется к свойству justify-content .

То же свойство justify-content используется для выравнивания элементов, когда flex-direction: column.

Packing Flex Lines (согласно спецификации Flex)

Я не уверен, реализовано ли это в каком-либо браузере, но когда-то это было частью спецификации CSS-flex и, вероятно, стоит упомянуть об этом для полноты картины.

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

Packing Flex Lines, но теперь с flex-direction: column

align-items

align-items контролирует выравнивание элементов по горизонтали относительно родительского контейнера.

flex-basis

flex-basis работает аналогично другому свойству CSS: min-width. Оно увеличивает размер элемента в зависимости от содержимого. Если свойство не задействуется, то используется значение по умолчанию.

flex-grow

flex-grow применяется к конкретному элементу и масштабирует его относительно суммы размеров всех других элементов в той же строке, которые автоматически корректируются в соответствии с заданным значением свойства. В примере значение flex-grow для элементов было установлено на 1, 7 и (3 и 5) в последней строке.

flex-shrink

flex-shrink — это противоположность flex-grow. В примере значение flex-shrink равно 7. При таком значении размер элемента равен 1/7 размера окружающих его элементов (размер которых автоматически скорректирован).

При работе с отдельными элементами можно использовать только одно свойство из трёх: flex-grow , flex-shrink или flex-base.

order

Используя свойство order , можно изменить естественный порядок элементов.

justify-items

И последнее, что нужно для тех, кто хочет использовать CSS Grid вместе с Flex Box… justify-items в CSS Grid похожи на justify-content в Flex. Свойства, описанные на приведенной выше диаграмме, не будут работать в Flex, но в значительной степени эквивалентны сетке для выравнивания содержимого ячеек.

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

При использовании Flex нужно учитывать, что:

• Flex-элементы по умолчанию ужимаются под свое содержимое; Это может пригодиться, когда есть блоки, размер которых изначально неизвестен и зависит от количества контента.

  Примеры: пункты меню в https://ketoplus.ru/

• Внешние отступы flex-элементов не схлопываются и не выпадают, в отличие от блочной модели.

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

  Пример: блоки в http://velpharm.ru/about/veltrade/

• Flex-элементы умеют перераспределять свободное пространство вокруг себя, таким образом меняя свои размеры;

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

  Пример: главная страница http://oflomil.ru/

• Внутри одного флекс-контейнера можно менять порядок флекс-элементов, хотя в DOM-дереве порядок остается неизменным.

  Бывают макеты страниц, в которых порядок следования элементов отличается на мобильной и десктопной версиях. Flex справится с задачей.

  Пример: разный порядок следования логотипа и навигации в шапке в мобильной и десктопной версиях (http://elmucin.ru/).

• Flex-элементу можно задать не только горизонтальные автоматические отступы, но и вертикальные; к тому же есть специальные свойства, с помощью которых очень просто выравнивать элементы внутри флекс-контейнера по горизонтали или вертикали.

  Пример: кнопка всегда находится в нижней части карточки статьи (https://rabiet.ru/experts/), блок продукция (https://stomatofit.ru/#products).

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

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

  Пример: каталог Велфарм (http://velpharm.ru/catalog/), блок Где купить (http://valosemid/#partners, https://gopantomid.ru/)

Стоит отметить, что Flexbox поддерживается в Internet Explorer 10-11, хоть и с некоторыми оговорками.

Некоторые интересные фишки Flex мы реализовали на сайте oflomil.ru. На разводящей странице есть 3 столбца на всю высоту видимой области экрана. На мобильном они трансформируются в 3 строки, каждая из которых равномерно занимает место в видимой части экрана. На продуктовых страницах без единого скрипта реализована бегущая строка. Текстовые элементы расположены в ряд благодаря inline-flex. Все свободное пространство в ряду распределено между этими элементами равномерно. Наш собственный сайт также свёрстан с использованием Flex.

Реализация бегущей строки с Flex

Из недостатков можно отметить то, что Flex не хватает при верстке писем. Не во всех почтовых клиентах он работает корректно.

В скором времени большую распространённость получит технология Grid. Однако Grid не замена Flexbox. Флексы в связке с гридами помогут решать задачи, которые раньше были сложными или вовсе невозможными. К примеру, Masonry-раскладка — одна из тех вещей, которую нельзя полноценно реализовать на данный момент. После появления возможностей спецификации Grid Layout 3 уровня в браузерах, реализация такой раскладки станет возможной и к тому же простой.

Источники: оригинал руководства с картинками

---

Дата-центр ITSOFT — размещение и аренда серверов и стоек в двух дата-центрах в Москве. За последние годы UPTIME 100%. Размещение GPU-ферм и ASIC-майнеров, аренда GPU-серверов, лицензии связи, SSL-сертификаты, администрирование серверов и поддержка сайтов.  

Свойство CSS flex

❮ Назад Полное руководство по CSS Далее ❯

Пример

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

#main div {
  -ms-flex: 1; /* IE 10 */
  flex: 1;
}

Попробуйте сами »

Совет: Ниже приведены дополнительные примеры «Попробуйте сами».

---

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

Свойство flex является сокращенным свойством для:

• гибкий рост
• гибкий термоусадочный
• гибкая основа

Свойство flex устанавливает гибкую длину для гибких элементов.

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

Показать демо ❯

Значение по умолчанию:	0 1 авто
Унаследовано:	нет
Анимация:	да, см. отдельные свойства . Читать о анимированном
Версия:	CSS3
Синтаксис JavaScript:	объект .style.flex=»1″ Попробуй

---

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

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

Числа, за которыми следует -webkit-, -ms- или -moz-, указывают на первую версию, которая работала с префиксом.

Собственность
гибкий	29,0 21,0 -вебкит-	11,0 10,0 -мс-	28,0 18,0 -мунц-	9.0 6.1 -вебкит-	17,0

---

---

Синтаксис CSS

flex: flex-grow flex-shrink flex-basis |auto|initial|inherit;

Значения свойств

.

Значение	Описание	Демо
flex-grow	Число, указывающее, насколько элемент будет расти по сравнению с остальными гибкими элементами	Демонстрация ❯
гибкий термоусадочный	Число, указывающее, насколько элемент будет уменьшаться по сравнению с остальными гибкими элементами
гибкая основа	Длина элемента. Допустимые значения: «auto», «inherit» или число, за которым следует «%», «px», «em» или любая другая единица измерения длины	Демонстрация ❯
авто	То же, что и 1 1 авто.
начальный	То же, что и 0 1 авто. Читать про начальный
нет	То же, что и 0 0 авто.
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

---

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

Пример

Использование flex вместе с медиа-запросами для создания различных макетов для разных размеров экрана/устройств:

.flex-container {
  display: flex;
  flex-wrap: обернуть;
}

.flex-item-left {
  flex: 50%;
}

. flex-элемент-право {
гибкость: 50%;
}

/* Адаптивный макет — делает макет с одним столбцом (100%) вместо двух столбцов макет (50%) */
@media (максимальная ширина: 800 пикселей) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Попробуйте сами »

---

Связанные страницы

Учебник CSS: CSS Flexible Box

Справочник по CSS: свойство flex-basis

Справочник по CSS: свойство flex-direction

Справочник CSS: свойство flex-flow

Справочник CSS: свойство flex-grow

Справочник CSS: свойство flex-shrink

Справочник CSS: свойство flex-wrap

Ссылка HTML DOM: свойство flex

❮ Назад Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

2 Примеры Top86 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Элементы CSS Flexbox

❮ Назад Далее ❯

---

Дочерние элементы (элементы)

Непосредственные дочерние элементы гибкого контейнера автоматически становятся гибкими (гибкими) элементами.

Приведенный выше элемент представляет собой четыре синих гибких элемента внутри серого гибкого контейнера.

Пример

Попробуй сам »

Свойства гибкого элемента:

• заказ
• гибкий рост
• гибкий термоусадочный
• гибкая основа
• гибкий
• самовыравнивание

---

Свойство порядка

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

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

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

Пример

Свойство order может изменить порядок гибких элементов:

Попробуй сам »

---

Свойство flex-grow

Свойство flex-grow указывает, насколько flex-элемент будет увеличиваться относительно остальных flex-элементов.

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

Пример

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

Попробуй сам »

---

---

Свойство flex-shrink

Свойство flex-shrink указывает, насколько flex-элемент будет уменьшаться относительно остальных flex-элементов.

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

Пример

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

Попробуй сам »

---

Свойство flex-basis

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

Пример

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

Попробуй сам »

---

Свойство flex

Свойство flex является сокращенным свойством свойства flex-grow , , flex-shrink и flex-basis .

Пример

Сделать третий гибкий элемент нерасширяемым (0), не сжимаемым (0) и с начальная длина 200 пикселей:

Попробуй сам »

---

Свойство align-self

Свойство align-self определяет выравнивание для выбранного элемента внутри гибкого контейнера.

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

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать align-self свойство:

Пример

Выравнивание третьего гибкого элемента по центру контейнера:

Попробуй сам »

Пример

Выровняйте второй гибкий элемент по верхней части контейнера, а третий гибкий элемент по дно контейнера:

Попробуй сам »

---

Свойства элементов CSS Flexbox

В следующей таблице перечислены все свойства элементов CSS Flexbox:

Свойство	Описание
самовыравнивание	Указывает выравнивание для элемента flex (переопределяет свойство align-items контейнера flex)
гибкий	Сокращенное свойство для flex-grow, flex-shrink и flex-basis свойства
гибкая основа	Указывает начальную длину гибкого элемента
гибкий рост	Указывает, насколько гибкий элемент будет увеличиваться по сравнению с остальными гибкими элементами внутри того же контейнера
гибкий термоусадочный	Указывает, насколько flex-элемент будет уменьшаться относительно остальных flex-элементов внутри того же контейнера
заказ	Указывает порядок гибких элементов внутри одного контейнера

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

2 Примеры Top86 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.