Невероятная мощность Flexbox

Sep 16, 2025

Инструкции

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

Основы Flexbox

В своей основной форме Flexbox состоит из двух элементов: гибкий контейнер (или родитель Flex) и гибкие элементы (гибкие дети). Тюб-контейнер - это элемент, содержащий (например, девочка ) Учитывая свойство отображения сгибаться Отказ Смерческие элементы представляют собой дочерние элементы гибкого контейнера, которые могут быть манипулируемыми путем различных свойств дисплея.

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

Как использовать Flexbox

Чтобы начать использовать FlexBox, вам необходимо сначала создать контейнер сгибания (родительский элемент, который будет содержать ваши элементы Flex). В этом примере мы будем использовать девочка блокировать. Прежде чем мы стиль элемент, давайте добавим еще три девочка блокирует внутри нашего сгибающегося контейнера, чтобы действовать как предметы Flex. На данный момент предметы будут сложены.

С нашими дочерними девсами мы можем установить свойство дисплея родительского контейнера для сгибаться Отказ

 Флебский контейнер {
Дисплей: flex;
}

Направления макета

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

 Флебский контейнер {
Дисплей: flex;
направление Flex: ряд;
}

Flex Container {
Дисплей: flex;
Flex-Направление: столбец;
}

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

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

 Флебский контейнер {
Дисплей: flex;
Направление Flex: Row-Reverse;
}

Flex Container {
Дисплей: flex;
направление Flex: столбец обратный;
}

Это может пригодиться, если вы хотите поменять макет на меньших экранах.

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

Отрегулируйте выравнивание

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

Flex-start. : Предметы, установленные к началу строки (влево, если вы не обратились от макета)

центр : Предметы, центрированные в пределах строки

сгибание : Предметы, установленные к концу строки (справа, если вы не изменили макет)

пространство между : Предметы равномерно распределены по ряду

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

Так что код может выглядеть так:

 Флебский контейнер {
Дисплей: flex;
направление Flex: ряд;
Содержание выравнивания: Flex-Start | Flex-End | Центр |. пространство между | Космос - вокруг | протяжение;
}

Вот ваши варианты вертикального выравнивания для элементов в гибкой контейнере:

Flex-start. : Предметы, выровненные на верхней части строки

центр : Предметы сосредоточены в пределах строки

сгибание : Предметы, выровненные в нижней части строки

протяжение : Предметы, растянутые по высоте строки

базовый : Предметы, выровненные с их базовыми линиями (воображаемая линия, на которой находится текст)

Код может выглядеть так:

 Флебский контейнер {
Дисплей: flex;
направление Flex: ряд;
Выровняйте элементы: Flex-Start | Flex-End | Центр |. базовая линия |. протяжение;
}

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

 Флебский контейнер {
Дисплей: flex;
Flex-Wrap: Wrap;
}

Flex Petes также получают свои собственные свойства на основе Flex. Когда элемент размещен внутри гибкого контейнера, он автоматически становится гибким ребенком, и предоставляется собственный набор стилей CSS на основе FLEX. Эти стили контролируют размер, выравнивание и порядок отображения.

Пролок сгиба

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

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

 Элемент Flex {
Flex-Shrink: & lt; номер & gt ;;
Flex-рост: & lt; номер & gt ;;
Flex-основание: & lt; длина & gt; |. авто;
}

Давайте посмотрим на то, что делает каждый из этих вариантов:

Усадка при необходимости: Размеры элемента на основе его ширины / высоты или его содержания. Товар не будет расти больше, чем он должен, но может сократиться до минимального размера, чтобы предотвратить переполнение
Заполните пустое пространство: Позволяет элементу расширяться, чтобы заполнить все доступное пространство внутри своего родителя. Если вы устанавливаете это на все элементы в контейнере Flex, они расширят, чтобы занять равные количества пустого пространства
Не уменьшается: Размеры элемента на основе его ширины / высоты или его содержания, но не позволяют ему сокращаться, даже если это приведет к переполнению

Flex Petes также могут иметь свои собственные настройки выравнивания, которые переопределяют выравнивание по умолчанию, установленным их родительским сгибным контейнером. Эти выравнивания ведут себя как объяснены ранее.

 Элемент Flex {
Дисплей: flex;
направление Flex: ряд;
Выровняйте элементы: Flex-Start | Flex-End | Центр |. базовая линия |. протяжение;
}

По умолчанию отображаются Flex Petes в том же порядке, что и в исходном коде. С Flexbox вы можете переопределить это поведение, чтобы обеспечить отображение элементов в точном заказа.

Есть четыре основных варианта, которые вы можете использовать здесь:

Авто : Значение по умолчанию, которое заказывает элементы, как они находятся в источнике
Первый : Пункт появляется первым в его гибком контейнере
Последний : Элемент появляется последним в его гибком контейнере
Обычай : Вы можете настроить заказ ваш товар будет отображаться в

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

 Элемент Flex {
заказ: & lt; integer & gt ;;
}

Почему я должен использовать это?

Я рад, что вы спросили! Использование Flexbox позволяет легко создавать адаптивные макеты, которые были когда-то очень сложными (или невозможными) для создания с более старыми модулями макета CSS.

Посмотрите на примеры на изображении ниже - многие из которых вы, вероятно, уже видели через Интернет. Почти все они будут предпринять значительное количество CSS (особенно в разных размерах экрана), но только берите несколько простых строк, чтобы достичь с Flexbox. Чтобы увидеть эти примеры в действии, посетите flexbox.webflow.com. Отказ

Невероятная мощность Flexbox

Основы Flexbox

Как использовать Flexbox

Направления макета

Отрегулируйте выравнивание

Пролок сгиба

Почему я должен использовать это?

Инструкции - Самые популярные статьи

Листы персонажей для 3D-моделей: 15 лучших советов

Как построить блог с Jekyll

Как нарисовать более реалистичные фигуры

Краска выразительный портрет искусства с Artrage 5

Как нарисовать слон

Как создать анимированный эффект печати

Начните с WebGL с помощью Three.js

Откройте для себя стиль и вещество типографии

Категории