|
|||||||||||||||
|
|||||||||||||||
CSS Flexible Box Layout Module |
|||
Бесплатная консультация специалиста
Loading…
|
Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex
или display:inline-flex
.
<div class="my-flex-container">
<div class="my-flex-block">item1</div>
<div class="my-flex-block">item2</div>
<div class="my-flex-block">item3</div>
</div>
.my-flex-container{
display: flex;
}
Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction
.
flex-direction
– направление главной осиДоступные значения flex-direction:
row
(значение по умолчанию) : слева направо (в rtl справа налево)row-reverse
: справа налево (в rtl слева направо)column
: сверху внизcolumn-reverse
: снизу вверхjustify-content
– выравнивание по главной оси.justify-content
определяет то, как будут выровнены элементы вдоль главной оси.
Доступные значения justify-content:
flex-start
(значение по умолчанию) : блоки прижаты к началу главной осиflex-end
: блоки прижаты к концу главной осиcenter
: блоки располагаются в центре главной осиspace-between
: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве.space-around
: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.align-items
– выравнивание по поперечной оси.align-items
определяет то, как будут выровнены элементы вдоль поперечной оси.
Доступные значения align-items:
flex-start
: блоки прижаты к началу поперечной осиflex-end
: блоки прижаты к концу поперечной осиcenter
: блоки располагаются в центре поперечной осиbaseline
: блоки выровнены по их baselinestretch
(значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width
/max-width
, если таковые заданы.СSS свойства flex-direction
, justify-content
, align-items
должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
flex-wrap
flex-wrap
.
Доступные значения flex-wrap:
nowrap
(значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)wrap
: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)wrap-reverse
: то-же что и wrap, но блоки располагаются в обратном порядке.flex-flow
– удобное сокращение для flex-direction + flex-wrapflex-flow
предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap
.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
/* т.е. ... */
.my-flex-block{
flex-direcrion:column;
flex-wrap: wrap;
}
/* это то же самое, что ... */
.my-flex-block{
flex-flow: column wrap;
}
align-content
align-content
, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.
Важно: align-content
работает только в многострочном режиме (т.е. в случае flex-wrap:wrap;
или flex-wrap:wrap-reverse;
)
Доступные значения align-content:
flex-start
: ряды блоков прижаты к началу flex-контейнера.flex-end
: ряды блоков прижаты к концу flex-контейнераcenter
: ряды блоков находятся в центре flex-контейнераspace-between
: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.space-around
: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.stretch
(значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.СSS свойства flex-wrap
и align-content
должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
flex-basis
– базовый размер отдельно взятого flex-блокаpx
, em
, %
, …) или auto
(по умолчанию). Если задан как auto
– за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.
flex-grow
– “жадность” отдельно взятого flex-блокаflex-grow
принимает безразмерное значение ( по умолчанию 0
)
Пример 1:
flex-grow:1
, то они будут одинакового размераflex-grow:2
, то он будет в 2 раза больше, чем все остальныеПример 2:
flex-grow:3
, то они будут одинакового размераflex-grow:12
, то он будет в 4 раза больше, чем все остальныеТ.е абсолютное значение flex-grow
не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.
flex-shrink
– фактор “сжимаемости” отдельно взятого flex-блока1
.
flex
– короткая запись для свойств flex-grow, flex-shrink и flex-basisflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/* т.е. ... */
.my-flex-block{
flex-grow:12;
flex-shrink:3;
flex basis: 30em;
}
/* это то же самое, что ... */
.my-flex-block{
flex: 12 3 30em;
}
align-self
– выравнивание отдельно взятого flex-блока по поперечной оси.
Делает возможным переопределять свойство flex-контейнера align-items
для отдельного flex-блока.
Доступные значения align-self (те же 5 вариантов, что и для align-items
)
flex-start
: flex-блок прижат к началу поперечной осиflex-end
: flex-блок прижат к концу поперечной осиcenter
: flex-блок располагаются в центре поперечной осиbaseline
: flex-блок выравнен по baselinestretch
(значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width
/max-width
, если таковые заданы.order
– порядок следования отдельно взятого flex-блока внутри flex-контейнера.order
. Оно задается целым числом и по умолчанию равно 0
.
Значение order
не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.
<div class="my-flex-container">
<div class="my-flex-block" style="order: 5" >item1</div>
<div class="my-flex-block" style="order: 10">item2</div>
<div class="my-flex-block" style="order: 5" >item3</div>
<div class="my-flex-block" style="order: 5" >item4</div>
<div class="my-flex-block" style="order: 0" >item5</div>
</div>
В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2
margin: auto
по вертикали.margin:auto
здесь работает и для вертикали!
.my-flex-container {
display: flex;
height: 300px; /* Или что угодно */
}
.my-flex-block {
width: 100px; /* Или что угодно */
height: 100px; /* Или что угодно */
margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */
}
seo & website usability | inet | os faq | hardware faq | memory | video | cpu | hdd | mainboard faq | printer & scaner | modem | mobiles | hackzone |
Магазин цифровой техники | Новинки магазина | Популярные товары | Bluetooth-адаптеры | Crystal Case | Flash-карты памяти | GPS-навигаторы | Hi-Tech гаджеты | MP3-FM Модуляторы | MultiSIM | WiFi оборудование | Авто видеорегистраторы | Авто инвертеры | Автомобильные держатели | Адаптер для 2 SIM-карт | Аккумуляторы для телефонов | Аккумуляторы оригинальные | Акустические системы | Алкотестеры | В автомобиль | Внешние аккумуляторы | Гарнитуры стерео | Дата-кабели USB | Дата-кабели мультимедийные ||| | ||| Зарядки автомобильные | Зарядки сетевые | Зарядки универсальные | Защитные пленки | Защитные стекла | Инструменты | Кабели HDMI | Кардридеры | Кнопки для сотовых | Корпусы для КПК | Корпусы для сотовых | Корпусы оригинальные | Кредлы | Моноподы и селфи-палки | Наушники | Сотовые телефоны | Столики для ноутбуков | Горячая линия бесплатной юридической консультации | Благотворительность
|
На главную | Cookie policy | Sitemap
|
po gonn © 2004 |
![]() |
|
||
|