САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Гибкий Бокс



1

2

3

4

5

6

7

8

Редактор кода »


CSS3 модуль макет на основе адаптируемых блоков

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

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

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


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

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

29.0 11.0 22.0 10 48

Элементы модели Flexbox

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

1

2

3

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

Пример

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

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

Редактор кода »


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

Гибкий контейнер становится гибкой настройкой свойства display к flex:

Пример

.flex-container {
  display: 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-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 используется для выравнивания гибких линий.

1

2

3

4

5

6

7

8

9

10

11

12

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

Пример

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

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

Редактор кода »

Пример

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

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

Редактор кода »

Пример

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

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

Редактор кода »

Пример

Значение center отображает гибкие линии в середине контейнера:

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

Редактор кода »

Пример

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

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

Редактор кода »

Пример

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

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

Редактор кода »


Идеальный центр

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

РЕШЕНИЕ: Установите оба свойства 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 в коде не должен отображаться как первый элемент в макете.

Порядок значения должен быть числом, по умолчанию 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.

Пример

Сделать третий гибкий элемент не растянутым (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 определяет выравнивание выбранного элемента внутри гибкого контейнера.

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

1

2

3

4

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

Пример

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

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

Редактор кода »

Пример

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

<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>

Редактор кода »


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

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

Редактор кода »

Адаптивный сайт с помощью гибкого бокса

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

Редактор кода »

CSS свойства гибкого бокса

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

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