Flexbox CSS3

13 Июля 2019 03:19 (Редактировано: 16 Февраля 2021 20:10)

Префиксы для CSS

Важно. Необходимо, чтобы стандартные записи display, justify-content и т.д. шли после префиксов во избежание непредвиденных проблем

/*********************************
префиксы для flex-контейнера 
*********************************/
 
.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
 
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
 
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
 
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
 
	-webkit-flex-flow: column wrap;
	-ms-flex-flow: column wrap;
	flex-flow: column wrap;
 
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
 
	-webkit-align-content: space-around;
	-ms-flex-line-pack: distribute;
	align-content: space-around;
 
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center
}
 
/******************************
префиксы для flex-элементов
******************************/
 
.flex-item {
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
 
	-webkit-flex-shrink: 3;
	-ms-flex-negative: 3;
	flex-shrink: 3;
 
	-webkit-flex-basis: 200px;
	-ms-flex-preferred-size: 200px;
	flex-basis: 200px;
 
	-webkit-box-flex: 1;
	-webkit-flex: 1 3 200px;
	-ms-flex: 1 3 200px;
	flex: 1 3 200px;
 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
 
	-webkit-box-ordinal-group: 3;
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
}

 

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

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

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;  /* Блок отцентрирован по вертикали и горизонтали! */
}