CSS-Flexbox


Что такое Flexbox?

Flexible Box Layout (Flexbox) — это модель CSS3 веб-разметки. Гибкий макет позволяет автоматически упорядочивать элементы внутри контейнера в зависимости от размера экрана. Flexbox состоит из Flexbox-контейнера и Flex-элементов.

Flex-контейнер

Внешний контейнер, содержащий flex-элементы, создается с помощью display: flex;

.flexbox {
display: flex
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это определяет флекс-контейнер; инлайн или блок в зависимости от заданного значения. Он включает flex-контекст для всех своих прямых дочерних элементов.

Flex-Items

Прямые дочерние элементы гибкого контейнера

Flex-Direction

Колонка

.flexbox {
 flex-direction: column;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Строка

.flexbox {
 flex-direction: row;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Колонна-реверс

.flexbox {
 flex-direction: column-reverse;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Реверс строк

.flexbox {
 flex-direction: row-reverse;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Обосновать содержимое

Пространство между

.flexbox {
 justify-content: space-between;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Пространство-равномерно

.flexbox {
 justify-content: space-evenly;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Пространство вокруг

.flexbox {
 justify-content: space-around;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Выравнивание элементов

Выровнять по центру

.flexbox {
 align-items: center;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Флекс-старт

.flexbox {
 align-items: flex-start;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Flex-end

.flexbox {
 align-items: flex-end;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Свойства флекс-обертки

Nowrap

.flexbox {
  flex-wrap: nowrap;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Обернуть

.flexbox {
 flex-wrap: wrap;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Обернуть в обратном направлении

.flexbox {
  flex-wrap: wrap-reverse;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий