Flexbox CSS3

13 Июля 2019 03:19 (Редактировано: 12 Августа 2019 00:47)

Основные параметры и их возможные значения.

Определяют поведение дочерних элементов, следовательно, применяются к контейнеру.

1. flex-direction - Направление оси

  • row - (значение по умолчанию) слева-направо
  • row-reverse - с права налево
  • column - сверху вниз
  • column-reverse - снизу вверх

2. justify-content - выравнивание по главной оси.

  • flex-start - (значение по умолчанию) блоки прижаты к началу главной оси
  • flex-end - блоки прижаты к концу главной оси
  • center - блоки располагаются в центре главной оси
  • space-between - блоки распределены с расстоянием между ними, первый и последний блоки прижаты к граням
  • space-around - блоки распределены с расстоянием вокруг них т.е. первый и последний блоки тоже с расстоянием относительно граней

3. align-items - выравнивание по поперечной оси.

  • flex-start - блоки прижаты к началу поперечной оси
  • flex-end - блоки прижаты к концу поперечной оси
  • center - блоки располагаются в центре поперечной оси
  • baseline - блоки выровнены по их baseline
  • stretch - (значение по умолчанию) блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.

Демо:

flex-direction:
justify-content:
align-items:
Start
item 1
item 2
item 3
End

 

Многострочная организация блоков.

Определяют поведение дочерних элементов, следовательно, применяются к контейнеру.

1. flex-wrap - свойство, отвечающее за многострочность

  • nowrap - (значение по умолчанию) блоки расположены в одну линию слева направо (в rtl справа налево)
  • wrap - блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
  • wrap-reverse - в обратном порядке.

2. flex-flow - сокращенная форма flex-direction и flex-wrap. По умолчанию: flex-flow: row nowrap. Пишутся через пробел.

Пример:

.flex-container {
  flex-direcrion:column;
  flex-wrap: wrap;
}

/* Эти две записи идентичны */

.flex-container {
  flex-flow: column wrap;
}

3. align-content - определяет то, как будут расположены блоки в многострочном режиме по вертикали и как они заполнят пространство контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap: wrap; или flex-wrap: wrap-reverse;).

  • flex-start - ряды блоков прижаты к началу контейнера.
  • flex-end - ряды блоков прижаты к концу контейнера
  • center - ряды блоков находятся в центре контейнера
  • space-between - блоки распределены с расстоянием между ними, первый и последний блоки прижаты к граням.
  • space-around - блоки распределены с расстоянием вокруг них т.е. первый и последний блоки тоже с расстоянием относительно граней.
  • stretch (значение по умолчанию) - Ряды блоков растянуты, занимая все имеющееся пространство.

Демо:

flex-wrap:
align-content:
A
Opportunity is missed by most people because it is dressed in overalls and looks like work.Thomas A. Edison
B
C
Work is a necessary evil to be avoided. Mark Twain
D
E
F

 

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

1. flex-basis - базовый размер отдельно взятого flex-блока. Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. 

2. flex-grow - “жадность” отдельно взятого flex-блока. Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0)

Пример 1:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
  • Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные

Пример 2:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
  • Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

3. flex-shrink - фактор “сжимаемости” отдельно взятого flex-блока. Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1.

4. flex - короткая запись для свойств 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;
}

Демо:

flex-grow:
flex-shrink:
flex-basis:
flex:   1   1   100px;
flex:   1   1   100px;

 

5. align-self - выравнивание отдельно взятого flex-блока по поперечной оси.

  • flex-start - flex-блок прижат к началу поперечной оси
  • flex-end - flex-блок прижат к концу поперечной оси
  • center - flex-блок располагаются в центре поперечной оси
  • baseline - flex-блок выравнен по baseline
  • stretch (значение по умолчанию) - flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.

6. order - порядок следования отдельно взятого flex-блока

Демо:

align-self:
order:
item
1
1
1
1
1
1

 

  1. Значения float у flex не учитываются;
  2. margin'ы не схлопываются, в отличие от дефолтного режима;
  3. margin: auto работает и по вертикали;

Пример для margin:auto:

.my-flex-container {
  display: flex;
  height: 300px;
}

.my-flex-block {
  width: 100px;
  height: 100px;
  margin: auto;  /* Блок отцентрирован по вертикали и горизонтали! */
}