Префиксы для 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, если таковые заданы.
Демо:
Многострочная организация блоков.
Определяют поведение дочерних элементов, следовательно, применяются к контейнеру.
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 (значение по умолчанию) - Ряды блоков растянуты, занимая все имеющееся пространство.
Демо:
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;
}
Демо:
5. align-self - выравнивание отдельно взятого flex-блока по поперечной оси.
- flex-start - flex-блок прижат к началу поперечной оси
- flex-end - flex-блок прижат к концу поперечной оси
- center - flex-блок располагаются в центре поперечной оси
- baseline - flex-блок выравнен по baseline
- stretch (значение по умолчанию) - flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.
6. order - порядок следования отдельно взятого flex-блока
Демо:
- Значения float у flex не учитываются;
- margin'ы не схлопываются, в отличие от дефолтного режима;
- margin: auto работает и по вертикали;
Пример для margin:auto:
.my-flex-container {
display: flex;
height: 300px;
}
.my-flex-block {
width: 100px;
height: 100px;
margin: auto; /* Блок отцентрирован по вертикали и горизонтали! */
}