• Страница 1 из 1
  • 1
Форум » III. HTML и CSS » Flexbox-вёрстка » Знакомство с flexbox-вёрсткой (Основные понятия)
Знакомство с flexbox-вёрсткой
1 Flex-контейнер - любой html-элемент, для которого задаётся в css-стилях:

Код
display: flex;


Flex-элемент - любой html-элемент, вложенный непосредственно во flex-контейнер (дочерний элемент flex-контейнера)

Пример кода:

HTML

Код
<div class="container">
  <div>Первый flex-элемент</div>
  <div>Второй flex-элемент</div>
  <div>Третий flex-элемент</div>
  <div>Четвёртый flex-элемент</div>
  <div>Пятый flex-элемент</div>
</div>


CSS

Код
.container {
  display: flex;
  background-color: #3399ff;
}
.container div {
  background-color: #ffff00;
}


В результате все flex-элементы блока-контейнера с классом .container выстроятся друг за другом по горизонтали.
Если ширина контейнера больше суммарной ширины его элементов, справа останется свободное место.

Смотрим демо

мы можем задать отступы между flex-элементами, например, так:

Код
.container div:nth-of-type(1n + 2) {
  margin-left: 10px;
}


в результате все flex-элементы, начиная со второго, получат отступ слева в 10px.

Изменить / Удалить

2 Свойства flex-контейнера

Свойство flex-flow - позволяет указать направление, в котором будут отображаться элементы, а также будут ли они переноситься на другую строку.

Свойство flex-flow состоит из двух свойств: flex-direction и flex-wrap, записывается, к примеру, так:

Код
.container {
  display: flex;
  flex-flow: column-reverse nowrap;
}


эта запись аналогична полной записи:

Код
.container {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
}


Значения свойства flex-direction:

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



row-reverse - элементы отображаются справа налево, при этом первый элемент расположен у правого края контейнера



column - отображает последовательно все элементы в виде блоков друг над другом (как при обычном отображении блоков div)

column-reverse - аналогично свойству column, с той лишь разницей, что направление отображения элементов изменяется на противоположное.
Те элементы, которые в html-коде указаны последними, будут находиться в верхней части контейнера.

Изменить / Удалить

3 Значения свойства flex-wrap

Данное свойство определяет, будут ли переноситься элементы:

а) на новую строку (если установлено значение row у flex-direction)

б) в новую колонку (если установлено значение column у flex-direction)

Возможные значения свойства:

nowrap - значение по умолчанию (перенос элементов запрещён), при котором элементы будут всё время располагаться в одной строке, сколь бы узким не был контейнер

wrap - при этом значении элементы, не умещающиеся в ширину контейнера, переносятся в новую строку (или колонку)

wrap-reverse - элементы переносятся, но в обратном порядке

Изменить / Удалить

4 Свойство justify-content

Данное свойство устанавливает выравнивание элементов в строке по ширине контейнера.

Цитата
Свойство работает в том случае, если указаны значения ширины элементов, и если их суммарная ширина меньше ширины самого контейнера.

Возможные значения свойства:

flex-start - элементы выравниваются от левого края строки (но, внимание, если вы присвоили значение row-reverse для flex-direction, то элементы выровняются от правого края!)

flex-end - элементы выравниваются от правого края строки (но, внимание, если вы присвоили значение row-reverse для flex-direction, то элементы выровняются от левого края строки!)

center - элементы выравниваются по центру контейнера

space-between - первый и последний элементы располагаются у краёв строки, остальные равномерно распределены с одинаковым расстоянием между ними

space-around - равномерно распределяет всё свободное пространство flex-контейнера между его элементами, у крайних элементов также есть расстояние от краёв контейнера, оно равно половине расстояния между крайним элементом и близлежащим к нему элементом.

Изменить / Удалить

5 Свойство align-items

Данное свойство определяет, как элементы различной высоты будут выравниваться по высоте строки в flex-контейнере.
По умолчанию все элементы в flex-контейнере растягиваются на всю высоту контейнера (имеют одинаковую высоту)

Возможные значения свойства:

flex-start - все элементы выравниваются своим верхним краем по верхнему краю контейнера.



flex-end - все элементы выравниваются своим нижним краем по нижнему краю контейнера.



center - вертикальный центр каждого элемента выравнивается по вертикальному центру контейнера



baseline - базовые линии всех элементов выравниваются по базовой линии первого элемента



stretch - поведение элементов по умолчанию, все элементы растягиваются на одинаковую высоту, высоту контейнера



Цитата
Если в свойствах flex-контейнера для flex-direction задано column, то тогда свойство align-items будет определять позиции элементов внутри контейнера по горизонтали, они будут располагаться друг за другом и иметь разную ширину.

Изменить / Удалить

6 Свойство align-content

Данное свойство определяет каким образом будут размещаться flex-элементы в контейнере, если они занимают несколько строк.

Цитата
Важно: свойство работает, если к контейнеру применено значение wrap и если высота контейнера больше суммы высот его элементов


Возможные значения свойства:

flex-start - строки flex-элементов располагаются у верхнего края контейнера



flex-end - строки flex-элементов располагаются у нижнего края контейнера



center - центры всех строк выравниваются по вертикали по центру контейнера



space-between - свободное пространство в контейнере по вертикали распределяется равномерно между строками, при этом первая и последняя строки прижаты к верхнему и нижнему краям контейнера



space-around - свободное пространство в контейнере по вертикали распределяется равномерно между строками, при этом оно добавляется также к верхнему и нижнему краям контейнера, но вполовину меньше



stretch - значение по умолчанию, элементы в строке имеют одинаковую высоту, при этом строки могут быть разной высоты, в зависимости от содержимого каждого элемента.

Изменить / Удалить

7 Свойства flex-элементов

Данные свойства определяют как отображаются элементы в контейнере, какова их ширина и какой у них способ выравнивания внутри контейнера.

Свойство order

Позволяет присвоить элементу числовое значение, которое будет определять его положение в строке (или колонке), при этом порядок следования HTML-кода в исходном файле не имеет значения.



Пример использования данного свойства: вывод основного контента страницы для поисковых систем в первую очередь. Имеем трехколоночный макет, где слева и справа находятся сайдбары, а основной контент посередине. Все три колонки заключены в общий блок div c классом .content

Код
<div class="content">
  <div class="main">
    <!-- основной контент -->
  </div>
  <div class="sidebar1">
    <!-- навигация и дополнения -->
  </div>
  <div class="sidebar2">
    <!-- еще дополнения -->
  </div>
</div>


Делаем блок div.content flex-контейнером, а с помощью свойства order размещаем элементы div в нужном нам порядке на странице (браузер разместит элементы начиная с наименьшего числа к наибольшему, т.е. сначала элемент с order:1, затем с order:2 и т.д)

Код
.content {
  display: flex;
}
.sidebar1 {
  order: 1;
}
.main {
  order: 2;
}
.sidebar2 {
  order: 3;
}


Получается, что несмотря на то, что в HTML-коде блок .main с основным контентом идёт первым, в браузере он, за счёт значения 2 для свойства order, отображается посередине макета, а не вместо левого сайдбара, как это было бы в стандартной блочной модели.

Изменить / Удалить

8 CSS-код в сообщении выше можно упростить, применив для блока с классом .sidebar1 (левый сайдбар) отрицательное значение свойству order:

Код
.content {
  display: flex;
}
.sidebar1 {
  order: -1;
}


Значение -1 сместит блок с классом .sidebar1 в крайнее левое положение в контейнере, расположив его перед остальными элементами в строке, в итоге, не устанавливая свойство order другим элементам, мы добились того же результата, блок с контентом оказался посередине, между левым и правым сайдбарами.

Если же присвоить блоку с классом .sidebar1 значение 1, не устанавливая свойство order другим элементам, то он сместится в крайнее правое положение в контейнере, расположится после всех элементов.

Цитата
В случае, если для свойства flex-direction задано значение column, то свойство order будет определять порядок следования элементов сверху вниз: элементы с меньшим номером отображаются выше элементов с большими номерами.
Не стоит забывать при этом, что значения column-reverse и row-reverse изменяют порядок следования в колонках и строках на противоположный.

Изменить / Удалить

9 Свойство align-self

Аналогично свойству align-items, с той лишь разницей, что align-items (свойство, применяемое к контейнеру) действует на все элементы flex-контейнера, а align-self на отдельные элементы.

Цитата
Важно: свойство align-self, применённое к элементу, замещает любое установленное значение свойства align-items, в результате, к примеру, можно выровнять все элементы по верхнему краю контейнера, а отдельный элемент - по нижнему.


Свойство align-self может принимать те же значения, что и align-items, только применяться они будут к отдельным элементам (к тем, которым задано свойство align-self)

Цитата
Значение baseline для свойства align-self применять имеет смысл только для нескольких элементов, а не для одного.

Изменить / Удалить

10 Свойство flex

Данное свойство сочетает в себе три свойства, являющиеся его значениями:

flex-grow, flex-shrink и flex-basis

Краткая запись свойства flex:

Код
flex: 1 1 400px;


то же самое, в полной записи:

Код
flex-grow: 1;
flex-shrink: 1;
flex-basis: 400px;


flex-grow

Используется в виде числового значения, указывающего на относительную ширину flex-элемента. Например, в контейнере есть три элемента div и вы хотите, чтобы у них была одинаковая ширина. Просто присвойте значение 1 для свойства flex-grow:

Код
.container {
  display: flex;
}

.container div {
  flex: 1;
}




так как для всех трёх блоков div задано одинаковое значение величины flex-grow, то и ширина всех трёх блоков одинакова.

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



Таким образом, фактическая ширина flex-элемента будет зависеть как от значения flex-grow, так и от количества элементов в контейнере.

Изменить / Удалить

11 flex-shrink

Второе значение свойства flex, также является числовым параметром и определяет, насколько узким может быть элемент, насколько он может сжиматься, если ширина контейнера меньше суммарной ширины его элементов.
Это зависит от ширины flex-элементов, которая определяется свойством flex-basis.

flex-shrink важно только в том случае, если для свойства flex-flow контейнера указано значение nowrap, благодаря которому все элементы будут находиться в одной строке.

flex-basis

Данное свойство определяет базовую ширину flex-элемента, которая может выражаться абсолютно (например, 100px или 5em) или в процентном выражении (например, 50%).
Другими словами, свойство flex-basis можно трактовать как минимальную ширину flex-элементов.

Цитата
При указании свойства flex-basis, у конкретного flex-элемента установится ширина, но в зависимости от других flex-параметров, элемент может стать как шире, так и уже, чем значение flex-basis.


Пример 1

В контейнере три элемента, для каждого из которых установлено значение flex-basis, равное 250px, но так как для элементов первое значение задано равным нулю, то они не растягиваются и их ширина совпадает со значением flex-basis



Однако, если первое значение будет больше нуля, строка заполнится полностью, например, на рисунке ниже, несмотря на то, что для элементов в контейнере установлено значение flex-basis, равное 250px, фактическая их ширина больше, так как для них заданы значения flex-grow (1,2 и 4 соответственно)



Цитата
Если вы не присвоите свойству flex-basis никакого значения, а свойству flex-grow зададите значение 0, то элемент сожмётся до минимальных размеров

Изменить / Удалить

12 Алгоритм расчёта браузером ширины элемента



Посмотрим на верхний рисунок. У нас есть flex-контейнер, в котором три элемента. Допустим, для каждого из них заданы какие-то значения свойств flex-grow и flex-basis

Пусть ширина контейнера будет равной 1000px, а сумма значений свойства flex-basis всех элементов равна:

Код
300 + 200 + 100 = 600


получается, что суммарная ширина всех элементов меньше ширины контейнера, то есть внутри контейнера остаётся свободное пространство.
Но, так как значения свойства flex-grow каждого элемента больше нуля, то они растягиваются, стремясь заполнить весь контейнер по ширине.

Как же браузер решает, какой должна быть ширина каждого из flex-элементов при этом?

Расчёт

Определяем значение дополнительного (свободного) пространства в контейнере:

Код
1000px - 600px = 400px


Чтобы понять, как распределить свободное пространство, браузер обращается к значениям flex-grow каждого элемента (1, 3 и 4 соответственно):

сумма этих значений:

Код
1 + 3 + 4 = 8


получается, что раз значение flex-grow первого элемента равно 1, то он должен получить 1/8 часть дополнительного пространства (а так как за единицу мы принимаем величину свободного пространства в 400px, соответственно, 400/8 = 50)

Получаем ширину первого элемента:

Код
300 + 50 = 350px


находим ширину второго элемента, для которого значение свойства flex-grow равно 3:

Код
(400/8)*3 + 200 = 350px


и третьего элемента:

Код
(400/8)*4 + 100 = 300px

Изменить / Удалить

Форум » III. HTML и CSS » Flexbox-вёрстка » Знакомство с flexbox-вёрсткой (Основные понятия)
  • Страница 1 из 1
  • 1
Поиск: