FlexBox состоит из Контейнера и его Дочерних элементов (items).
Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex;
<style>
.flex{ display: flex; }
</style>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
</div>
CSS свойства Flexbox
Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера.
Для контейнера:
display:
flex - элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
inline-flex - элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
flex-direction:
row (стандартный) - направление элементов слева направо (>)
column - направление элементов сверху вниз (v)
row-reverse - направление элементов справа налево (<)
column-reverse - направление элементов снизу вверх (^)
flex-direction: row ;
HTML:
<div class="flex">
<div class="flex-itm">1</div>
<div class="flex-itm">2</div>
<div class="flex-itm">3</div>
<div class="flex-itm">4</div>
</div>
CSS:
.flex{ display: flex; flex-direction: row; }
flex-direction: row-reverse ;
HTML:
<div class="flex">
<div class="flex-itm">1</div>
<div class="flex-itm">2</div>
<div class="flex-itm">3</div>
<div class="flex-itm">4</div>
</div>
CSS:
.flex{ display: flex; flex-direction: row-reverse; }
flex-direction: column;
HTML:
<div class="flex">
<div class="flex-itm">1</div>
<div class="flex-itm">2</div>
<div class="flex-itm">3</div>
<div class="flex-itm">4</div>
</div>
CSS:
.flex{ display: flex; flex-direction: column; }
flex-direction: column-reverse;
HTML:
<div class="flex">
<div class="flex-itm">1</div>
<div class="flex-itm">2</div>
<div class="flex-itm">3</div>
<div class="flex-itm">4</div>
</div>
CSS:
.flex{ display: flex; flex-direction: column-reverse; }
flex-wrap: | wrap | wrap-reverse;
Управляет переносом не помещающихся в контейнер элементов.
nowrap (default) - вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
wrap - включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
wrap-reverse - тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).
flex-flow: direction wrap
Объединяет оба свойства flex-direction и flex-wrap. Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow.
flex-flow принимает значения двух этих свойств, разделенные пробелом. Или можно указать одно значение любого свойства.
/* только flex-direction */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-
reverse; /* только flex-wrap */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* сразу оба значения: flex-direction и flex-wrap */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
justify-content:
Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.
flex-start (default) - элементы будут идти с начала (в конце может остаться место).
flex-end - элементы выравниваются по концу (место останется в начале)
center - по центру (место останется слева и права)
space-between - крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
space-around - свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
space-evenly - тоже что space-around, только расстояние у крайних элементов до краев контейнера такое же как и между элементами.
align-content:
Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-contentтолько для противоположной оси.
stretch (default) - ряды растягиваются заполняя строку полностью
flex-start - ряды группируются в верхней части контейнера (в конце может остаться место).
flex-end - ряды группируются в нижней части контейнера (место останется в начале)
center - ряды группируются по центру контейнера (место останется по краям)
space-between - крайние ряды прижимаются к краям (место между рядами распределяется равномерно)
space-around - свободное пространство равномерно распределяется между рядами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
space-evenly - тоже что space-around, только расстояние у крайних элементов до краев контейнера такое же как и между элементами.
align-items:
Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). То есть сами ряды выравниваются через align-content, а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content.
stretch (default) - элементы растягиваются заполняя строку полностью
flex-start - элементы прижимаются к началу ряда
flex-end - элементы прижимаются к концу ряда
center - элементы выравниваются по центру ряда
baseline - элементы выравниваются по базовой линии текста
Для элементов контейнера
flex-grow:
Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.
По умолчанию flex-grow: 0
Если всем элементам указать flex-grow: 1, то все они растянуться одинаково и заполнять все свободное место в контейнере.
Если одному из элементов указать flex-grow: 1, то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего...
Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные
flex-shrink:
Задает коэффициент уменьшения элемента. Свойство противоположное flex-grow и определяет как элемент должен сжиматься, если в контейнере не остается свободного места. Т.е. свойство начинает работать, когда сумма размеров всех элементов больше чем размер контейнера.
По умолчанию flex-shrink:1
Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px - flex-basis:300px;. Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2;, а второму flex-shrink: 1;. Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.
flex-basis:
Устанавливает базовую ширину элемента - ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px, %, em, rem и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. В режиме auto элемент получает базовую ширину относительно контента внутри него.
По умолчанию: auto
Иногда может пригодится установить ширину элемента жестко через привычное свойство width. Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink. Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis
align-self:
Позволяет изменить свойство align-items, только для отдельного элемента.
По умолчанию: от align-items контейнера
stretch - элемент растягиваются заполняя строку полностью
flex-start - элемент прижимаются к началу строки
flex-end - элемент прижимаются к концу строки
center - элемент выравниваются по центру строки
baseline - элемент выравниваются по базовой линии текста
order:
Позволяет менять порядок (позицию, положение) элемента в общем ряду.
По умолчанию: order: 0
По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 .... Например если одному из элементов указать order: 1, то сначала будут идти все нулевые, а потом элемент с 1.
Разделение (разрыв) между элементами флекс блока
Чтобы расположить элементы контейнера по краям и произвольно выбрать элемент после которого будит идти разрыв, нужно использовать свойство margin со значением auto.
<div class="flex" >
<div class="item" ></div>
<div class="item" ></div>
<div class="item" ></div>
</div>
STYLE:
.flex{ display: flex;}
.itm{ margin-left:auto; } или .itm{ margin-right:auto ;}