ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Flexbox CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Flexbox


1

2

3

4

5

6

7

8

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


CSS Модуль Flexbox Layout (гибкая компоновка)

До модуля Flexbox Layout было четыре режима макета:

  • Блок, для разделов на веб-странице
  • Встроенный, для текста
  • Таблица, для двумерных данных таблицы
  • Позиционируется, для явного положения элемента

Модуль гибкой компоновки упрощает проектирование гибкой адаптивной структуры макета без использования float или позиционирования.


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

Свойства flexbox поддерживаются во всех современных браузерах.

29.0 11.0 22.0 10 48

Flexbox элементы

Чтобы начать использовать модель Flexbox, сначала необходимо определить контейнер Flex.

1

2

3

Элемент выше представляет гибкий (flex) контейнер (синяя область) с тремя гибкими (flex) элементами.

Пример

Flex контейнер с тремя flex-элементами:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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


Родительский элемент (контейнер)

Flex контейнер становится гибким, если для свойства display установить значение flex:

Пример

.flex-container {
  display: flex;
}

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


Свойство flex-direction

Свойство flex-direction определяет, в каком направлении контейнер хочет складывать элементы flex.

1

2

3

Пример

Значение column размещает элементы flex по вертикали (сверху вниз):

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

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

Пример

Значение column-reverse складывает flex элементы по вертикали (но снизу вверх):

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

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

Пример

Значение row складывает flex элементы горизонтально (слева направо):

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

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

Пример

Значение row-reverse складывает flex элементы по горизонтали (но справа налево):

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

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


Свойство flex-wrap

Свойство flex-wrap указывает, следует ли переносить flex элементы или нет

В приведенных ниже примерах есть 12 элементов flex, чтобы лучше продемонстрировать свойство flex-wrap.

1

2

3

4

5

6

7

8

9

10

11

12

Пример

Значение wrap указывает, что элементы flex будут переноситься при необходимости:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

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

Пример

Значение nowrap указывает, что элементы flex не будут переноситься (это по умолчанию):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

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

Пример

Значение wrap-reverse указывает, что flex элементы будут переноситься при необходимости в обратном порядке:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

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


Свойство flex-flow

Свойство flex-flow является сокращенным свойством для установки свойств flex-direction и flex-wrap.

Пример

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

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


Свойство justify-content

Свойство justify-content используется для выравнивания элементов flex:

1

2

3

Пример

Значение center выравнивает элементы flex в центре контейнера:

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

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

Пример

Значение flex-start выравнивает элементы flex в начале контейнера (это по умолчанию):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

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

Пример

Значение flex-end выравнивает элементы flex в конце контейнера:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

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

Пример

Элемент space-around отображает элементы flex с пробелом до, между и после строк:

.flex-container {
  display: flex;
  justify-content: space-around;
}

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

Пример

Значение space-between отображает элементы flex с пробелом между строками:

.flex-container {
  display: flex;
  justify-content: space-between;
}

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


Свойство align-items

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

1

2

3

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

Пример

Значение center выравнивает элементы flex в середине контейнера:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

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

Пример

Значение flex-start выравнивает элементы flex в верхней части контейнера:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

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

Пример

Значение flex-end выравнивает элементы flex в нижней части контейнера:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

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

Пример

Значение stretch растягивает flex-элементы для заполнения контейнера (это по умолчанию):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

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

Пример

Значение baseline выравнивает элементы flex, такие как выравнивание их базовых линий:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

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


1

2

3

4

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


Свойство align-content

Свойство align-content используется для выравнивания flex линий.

1

2

3

4

5

6

7

8

9

10

11

12

В этих примерах мы используем контейнер высотой 600 пикселей со свойством flex-wrap, установленным на wrap, чтобы лучше продемонстрировать свойство align-content.

Пример

Значение space-between отображает flex линии с равным интервалом между ними:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

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

Пример

Значение space-around отображает flex линии с пробелом до, между и после них:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

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

Пример

Значение stretch растягивает flex линии, чтобы занять оставшееся пространство (это по умолчанию):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

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

Пример

Отображение значения center отображает flex линии в середине контейнера:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

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

Пример

Значение flex-start отображает flex линии в начале контейнера:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

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

Пример

Значение flex-end отображает flex линии в конце контейнера:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

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


Идеальное Центрирование

В следующем примере мы решим очень распространенную проблему стиля: идеальное центрирование.

HTITYBT: Установите свойства justify-content и align-items в center, и flex элемент будет идеально отцентрирован:

Пример

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

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


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

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

1

2

3

4

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

Пример

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

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


Свойство order

Свойство order определяет порядок элементов flex.

1

2

3

4

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

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

Пример

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

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

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


Свойство flex-grow

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

1

2

3

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

Пример

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

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

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


Свойство flex-shrink

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

1

2

3

4

5

6

7

8

9

10

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

Пример

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

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


Свойство flex-basis

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

1

2

3

4

Пример

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

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


Свойство flex

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

Пример

Сделать третий flex элемент не растяжимым (0), не сжимающимся (0) и имеющим начальную длину 200 пикселей:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

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


Свойство align-self

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

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

1

2

3

4

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

Пример

Выровняйте третий flex элемент в середине контейнера:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

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

Пример

Совместите второй flex элемент в верхней части контейнера и третий flex элемент в нижней части контейнера:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

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


Адаптивная галерея изображений с использованием Flexbox

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

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

Адаптивный сайт с использованием Flexbox

Используйте flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:

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

CSS Свойства Flexbox

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

Свойство Описание
display Определяет тип поля, используемого для HTML элемента
flex-direction Определяет направление flex элементов внутри flex контейнера
justify-content Горизонтальное выравнивание flex элементов когда элементы когда элементы не используют все доступное пространство на главной оси
align-items Вертикальное выравнивание flex элементов, когда элементы не используют все доступное пространство на поперечной оси
flex-wrap Указывает, следует ли переносить элементы flex или нет, если для них недостаточно места на одной линии flex
align-content Изменяет поведение свойства flex-wrap. Он похож на align-items, но вместо выравнивания flex-элементов он выравнивает flex-линии
flex-flow Сокращенное свойство для flex-direction и flex-wrap
order Определяет порядок flex элемента относительно остальных flex элементов в том же контейнере
align-self Используется на flex элементах. Переопределяет свойство align-items контейнера
flex Сокращенное свойство для свойств flex-grow, flex-shrink и flex-based