CSS3 Flexible Box
CSS3 Flexible Box представляет собой новый режим макета.
CSS3 Flexible Box (Flexible Box или flexbox), когда страница является необходимость адаптации к различным размерам экрана и типов устройств, когда элементы должны обеспечить правильное расположение поведения.Целью введения гибкой модели компоновки Пакетик, чтобы обеспечить более эффективный способ организовать для контейнера подэлементов, выравнивание и распределение пустого пространства.
Поддержка браузеров
Цифры в таблице представляют первый браузер для поддержки номер версии недвижимости.
Сразу после номера -webkit- браузера или -moz- указанного префикса.
| свойство | |||||
|---|---|---|---|---|---|
| Базовая поддержка (Однолинейная flexbox) | 29,0 21,0 -webkit- | 11,0 | 22,0 18,0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
| Многоканальный flexbox | 29,0 21,0 -webkit- | 11,0 | 28,0 | 6.1 -webkit- | 17,0 15,0 -webkit- 12.1 |
содержание CSS3 Flexible Box
Гибкая коробка выполнена из эластичного контейнера (Flex контейнера) и эластичных субэлементов (Flex элементов) компонентов.
Эластичный контейнер путем установки свойства дисплея является гибким или инлайн-флекс будет определяться как эластичную емкость.
Эластичный контейнер содержит один или более упругих субэлементов.
Примечание: эластичный внешний контейнер и упругий элемент является потомком нормального рендеринга. Гибкая коробка определяет только то, как упругая дочерние элементы в макете эластичного контейнера.
Гибкая подэлемент обычно отображается в поле упругой линии. По умолчанию каждый контейнер только одна строка.
Ниже показан упругий элемент дочерние элементы отображаются в одной строке, слева направо:
примеров
<HTML>
<Head>
<Style>
.flex-контейнер {
дисплей: -webkit-флекс;
Дисплей: Flex;
ширина: 400px;
высота: 250px;
фонового цвета: светло - серого;
}
.flex-элемент {
цвет фона: CornflowerBlue;
ширина: 100px;
высота: 100px;
Запас: 10px;
}
</ Style>
</ Head>
<Body>
<Div класс = "флекс-контейнер">
<Div класс = "Flex-элемент"> флекс пункт 1 </ DIV>
<Div класс = "Flex-элемент"> флекс пункт 2 </ DIV>
<Div класс = "Flex-элемент"> Flex пункт 3 </ DIV>
</ Div>
</ Body>
</ HTML>
Попробуйте »
Конечно, мы можем изменить расположение.
Если мы устанавливаем direction свойство rtl (справа налево), расположение эластичных субэлементов изменится, макеты страниц изменения также следует:
примеров
Направление: РТЛ;
}
.flex-контейнер {
дисплей: -webkit-флекс;
Дисплей: Flex;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
.flex-элемент {
цвет фона: CornflowerBlue;
ширина: 100px;
высота: 100px;
Запас: 10px;
}
Попробуйте »
Flex-направление
flex-direction порядок определяет упругую подэлемент в родительском контейнере.
грамматика
flex-direction: row | row-reverse | column | column-reverse
flex-direction значения:
- ряд: в поперечном направлении слева направо (слева), расположение по умолчанию.
- рядного обратная: обратный в боковом направлении выравнивается (выравнивается по правому краю, вперед с заднего ряда, последний из которых в верхней части.
- колонка: вертикальное расположение.
- колонного обратная: обратная вертикальное расположение, с заднего ряда вперед, и, наконец, ряд в верхней части.
Следующий пример иллюстрирует row-reverse использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-направление: рядного обратный;
Flex-направление: строки обратного хода;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Следующий пример иллюстрирует column , используемый:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-направление: колонка;
Flex-направление: колонка;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующие примеры демонстрируют column-reverse использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-направление: колонка обратный;
Flex-направление: колонки заднего хода;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Атрибут оправдает-контент
Содержание выравнивания (обосновывать-содержание) на упругие свойства приложения контейнера, упругие эластичные элементы контейнера выровнены вдоль главной оси (главной оси).
Синтаксис оправдает-содержание выглядит следующим образом:
justify-content: flex-start | flex-end | center | space-between | space-around
Каждый стоимостной анализ:
- флекс-старт:
Гибкий проект на первой линии рядом с наполнением. Это значение по умолчанию. Первый основной пуск от внешних краев упругого элемента помещается в главном старта края линии, и последующее заподлицо в свою очередь, помещен упругий член.
- Flex-конец:
Гибкий проект до конца строки, рядом с наполнением. Первые главный конец элементы из-за пределов эластичных нитей помещаются в главный конец края линии, и последующее заподлицо в свою очередь, помещен упругий член.
- центр:
Гибкий проект в центре рядом с заливкой. (Если оставшееся свободное пространство является отрицательным, проект также будет переполняться эластичность в обоих направлениях).
- Пространство между ними:
Гибкий проект равномерно распределен по ряду. Если пространство является отрицательным или только упругая термин, значение эквивалентно флекс-старт. В противном случае, основного начинать с внешних краев первой строки и упругого элемента выравнивания, в то время как главный конец линии и боковой линии маржа в прошлом упругая термин выравнивание и распределение оставшихся элементов на упругой линии, примыкающий на равном расстоянии пунктов.
- Пространство вокруг:
Гибкий проект равномерно распределен по линии, по обе стороны от левой половины пространства. Если пространство является отрицательным или только упругая термин, значение эквивалентно центру. В противном случае, эластичность проекта по линии распределения и на одинаковом расстоянии друг от друга (например, 20 пикселей), оставляя половину интервала (1/2 * 20px = 10px) между головой и хвостом с обеих сторон и эластичного контейнера.
Renderings показать:
Следующий пример демонстрирует flex-end использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-оправдает-контента: Flex-конец;
обосновывать-контента: Flex-конец;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует center обработки использования Коллекция :
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-оправдает-контента: центр;
обосновывать-содержание: центр;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующие примеры демонстрируют space-between использованием:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-оправдает-контента: пространство между ними;
обосновывать-содержание: пространство между ними;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующие примеры демонстрируют space-around использования:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-оправдает-контента: пространство вокруг;
обосновывать-содержание: пространство вокруг;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
ALIGN-элементы недвижимости
align-items установки или извлечения упругого элемента на стороне оси коробки ( по вертикальной оси) направлении размещени.
грамматика
align-items: flex-start | flex-end | center | baseline | stretch
Каждый стоимостной анализ:
- Flex-старт: граница сторона коробки элемента упругой оси (вертикальная ось) по отношению к начальной позиции оси живой стороне границы стартовой линии.
- флекс конец: упругая граница стороны оси блока элемента (вертикальная ось) по отношению к исходной позиции, чтобы жить конец вала на стороне линии границы.
- центр: элемент коробки упругая помещен в середине оси со стороны линии (вертикальная ось) на. (Если размер меньше, чем размер упругой линии гнездового элемента, то есть такой же длины в обоих переливом направлениях).
- Исходные данные: коробка элементы, такие как упругое внутреннего вала и линии вала со стороны одно и то же, значение эквивалента "флекс-старт". В других случаях значение будет участвовать в базовой линии выравнивания.
- растягивать: Если размер атрибута Маржа коробки определяет размер стороны вала 'авто', его значение будет близко к позициям, как размер, но будет следовать свойство 'мин / макс-ширина / высота' ограничения.
Следующий пример демонстрирует stretch(默认值) по stretch(默认值) использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-ALIGN-элементы: стрейч;
выравнивать-элементы: растянуть;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует flex-start использования:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-ALIGN-элементы: Flex-старт;
выравнивать-элементы: Flex-старт;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует flex-end использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-ALIGN-элементы: Flex-конец;
выравнивать-элементы: Flex-конец;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует center обработки использования Коллекция :
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-ALIGN-элементы: центр;
выравнивать-элементы: центр;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует baseline использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-ALIGN-элементы: базовые;
выравнивать-элементы: базовый уровень;
ширина: 400px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
флекс-обертка недвижимость
АтрибутFlex-обертка используется для указания коробки ребенка режим упругий элемент обертку.
грамматика
flex-flow: ||
Каждый стоимостной анализ:
- Nowrap - По умолчанию, эластичный контейнер в виде одной линии.В этом случае упругий ребенок может переполнить контейнер.
- оберните - эластичная емкость несколько строк.Переполнение часть упругого ребенка помещается в этом случае к новой линии, внутренний разрыв строки будет происходить раздел
- наматывается обратный - обратный порядок обруча.
Следующий пример демонстрирует nowrap использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-пленка: Nowrap;
флекс-пленка: Nowrap;
ширина: 300px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует wrap использования:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-компресс: обернуть;
Flex-обертку: завернуть;
ширина: 300px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Следующий пример демонстрирует wrap-reverse использование:
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-пленка: наматывается обратный;
флекс-пленка: оберните перемотать;
ширина: 300px;
высота: 250px;
фонового цвета: светло-серого;
}
Попробуйте »
Атрибут ALIGN-контента
align-content атрибут используется для изменения flex-wrap поведение атрибута. Подобные align-items , но это не установлено выравнивание эластичных субэлементов, но установить выравнивание каждой строки.
грамматика
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Каждый стоимостной анализ:
-
stretch- по умолчанию. Каждая линия будет растягиваться, чтобы занять оставшееся пространство. -
flex-start- ряды сложенных коробок в исходное положение эластичного контейнера. -
flex-end- ряды сложенных коробок до конечного положения эластичного контейнера. -
center- ряды штабелированных коробок в среднее положение эластичного контейнера. -
space-between- каждая строка гибкого контейнера мешок распределяется равномерно. -
space-around- каждая строка гибкого контейнера мешок равномерно распределяется между двумя концами , чтобы сохранить половину суб-элементов и подэлементов женных с шагом размер.
Следующий пример демонстрирует center обработки использования Коллекция :
примеров
дисплей: -webkit-флекс;
Дисплей: Flex;
-webkit-флекс-компресс: обернуть;
Flex-обертку: завернуть;
-webkit-Align-контента: центр;
выравнивать-контента: центр;
ширина: 300px;
высота: 300px;
фонового цвета: светло-серого;
}
Попробуйте »
Гибкие атрибуты подэлемент
последовательность
грамматика
order:
Каждый стоимостной анализ:
- <Integer>: целое значение, используемое для определения порядка, в котором малая величина верхней поверхности. Это может быть отрицательным.
order , чтобы установить свойства в пределах упругих свойств эластичных контейнеров дочерних элементов:
примеров
цвет фона: CornflowerBlue;
ширина: 100px;
высота: 100px;
Запас: 10px;
}
.first {
-webkit порядка: -1;
Последовательность: -1;
}
Попробуйте »
выравнивать
Настройки "запас" является "авто" значение, автоматически получить эластичную емкость в оставшемся пространстве. Таким образом, установить значение вертикального маржа "авто", это позволяет упругие подэлементы полностью сосредоточены на направлении двухосного упругого контейнера.
Следующие примеры находятся на первом суб-упругий элемент , установленный margin-right: auto; . Оставшееся пространство будет помещен в нужных элементов:
примеров
цвет фона: CornflowerBlue;
ширина: 75px;
высота: 75px;
Запас: 10px;
}
.flex-вещь: первый ребенок {
Маржа правом: авто;
}
Попробуйте »
Идеальный центр
Следующие примеры будут идеальным решением проблем, которые мы обычно сталкиваемся центр.
Упругие коробка, центр становится очень просто, просто хочу , чтобы установить margin: auto; может сделать упругие подэлементы в осевом направлении на двух совершенно по центру:
примеров
цвет фона: CornflowerBlue;
ширина: 75px;
высота: 75px;
Запас: авто;
}
Попробуйте »
выравнивать-я
align-self атрибут используется для установки направления выравнивания самого упругого элемента на стороне оси ( по вертикальной оси).
грамматика
align-self: auto | flex-start | flex-end | center | baseline | stretch
Каждый стоимостной анализ:
- Авто: Если "выравнивать-я" значение "Авто", расчетное значение родительского элемента элемента 'ALIGN-предметов', если он не имеет родителя, рассчитанное значение "растягиваться".
- Flex-старт: граница сторона коробки элемента упругой оси (вертикальная ось) по отношению к начальной позиции оси живой стороне границы стартовой линии.
- флекс конец: упругая граница стороны оси блока элемента (вертикальная ось) по отношению к исходной позиции, чтобы жить конец вала на стороне линии границы.
- центр: элемент коробки упругая помещен в середине оси со стороны линии (вертикальная ось) на. (Если размер меньше, чем размер упругой линии гнездового элемента, то есть такой же длины в обоих переливом направлениях).
- Исходные данные: коробка элементы, такие как упругое внутреннего вала и линии вала со стороны одно и то же, значение эквивалента "флекс-старт". В других случаях значение будет участвовать в базовой линии выравнивания.
- растягивать: Если размер атрибута Маржа коробки определяет размер стороны вала 'авто', его значение будет близко к позициям, как размер, но будет следовать свойство 'мин / макс-ширина / высота' ограничения.
Следующий пример демонстрирует упругие подэлементы выравнивать автопортрета эффект применения различных значений:
примеров
цвет фона: CornflowerBlue;
ширина: 60px;
мин-высота: 100px;
Запас: 10px;
}
.item1 {
-webkit-Align-я: Flex-старт;
выравнивать-себя: Flex-старт;
}
.item2 {
-webkit-Align-я: Flex-конец;
выравнивать-я: Flex-конец;
}
.item3 {
-webkit-Align-я: центр;
выравнивать-себя: центр;
}
.item4 {
-webkit-Align-я: базовый уровень;
выравнивать-себя: базовый уровень;
}
.item5 {
-webkit-Align-я: растягивать;
выравнивать автопортрета: растягивать;
}
Попробуйте »
сгибать
flex атрибут используется , чтобы указать способ выделить пространство для эластичных субэлементов.
грамматика
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Каждый стоимостной анализ:
- нет: ни один высчитывает Ключевое слово: 0 0 авто
- [Flex вырастали]: определение коэффициента расширения упругого элемента коробки.
- [Flex термоусадочные]: определение коэффициента усадки упругого элемента коробки.
- [Flex-основа]: Ссылка по умолчанию значение определяет упругий элемент коробки.
В следующем примере, первый суб-упругий элемент занимает 2/4 пространства, а два других друг 1/4 Площадь:
примеров
цвет фона: CornflowerBlue;
Запас: 10px;
}
.item1 {
-webkit-флекс: 2;
сгибать: 2;
}
.item2 {
-webkit-флекс: 1;
сгибать: 1;
}
.item3 {
-webkit-флекс: 1;
сгибать: 1;
}
Попробуйте »
Другие примеры
Создание гибкой страницы с помощью эластичного коробку
CSS3 Гибкая окно Свойства
В следующей таблице перечислены часто используемые в поле упругих свойств:
| свойство | описание |
|---|---|
| дисплей | Указывает тип элемента окна HTML. |
| Flex-направление | Укажите, как расположить элементы нейтронного упругого контейнера |
| обосновывать-контент | Упругий элемент в коробке шпинделя (по горизонтали) направлении выравнивания. |
| ALIGN-элементы | Упругий элемент по оси боковых коробки (по вертикальной оси) направление ориентации. |
| флекс-пленка | Является ли упругим обертка коробки подэлементам за пределы родительского контейнера. |
| выравнивать-контент | Изменить поведение флекс-виткам собственности, аналогичные выравнивать-элементы, но не установлены подэлементов выровнены, но выравнивание множества линий |
| Flex-поток | Flex-направление и Flex-обертка стенографии |
| заказ | Дочерний элемент порядка упругая коробка. |
| выравнивать-я | Используйте упругие дочерние элементы. Накройте контейнер ALIGN-объектов имущества. |
| сгибать | Как настроить упругом ящик дочерний элемент распределенного пространства. |