Руководство по CSS Flexbox

Данное CSS свойство имеет много возможных значений, но для включения Flexbox есть два: flex и inline-flex. Можно догадаться, что первое включает блочный режим взаимодействия с окружающими элементами, а второе аналогичное inline-block. Признаться, за все время использовании flex модели для верстки страниц и создания сайтов в целом, я еще ни разу не использовал inline-flex.

Без установки данного свойства, все остальные теряют смысл.

.container {
  display: flex | inline-flex;
}

Данное свойство может менять направление главной оси (main axis), вдоль которой располагаются флекс элементы (flex item).

Возможные занчения:

• row – это значение по умолчанию, и располагает элементы слева на право;
• row-reverse – справа на лево;
• column – сверху вниз;
• column-reverse – снизу вверх.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Это свойство позволяет дочерним элементам (flex item) размещаться в несколько рядов (или колонок если задано свойство flex-direction: column | column-reverse;), так как, по умолчанию, они будут размещаться в один рад (или колонку).

Доступные значения:

• nowrap – это значение по умолчанию, все дочерние элементы (flex item) будут размещаться в одну линию, горизонтально или вертикально;
• wrap – элементы будут заворачиваться на новую линию сверху вниз
• wrap-rewerse – как и для предыдущего свойства, но снизу вверх.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Очень полезное и часто используемое свойство. Оно определяет, как элементы будут выравниваться внутри контейнера вдоль главной оси (main axis).

По умолчанию, все элементы внутри Flexbox будут пытаться занять все допустимое пространство, но их ширину можно ограничить, тогда остается пустое место. В этот момент justify-content и становится актуальным.

Приведу только, самые частые значения:

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Это свойство тоже отвечает за выравнивание элементов, но в отличии от предыдущего, выравнивание осуществляется вдоль поперечной оси (cross axis). Оно работает всегда, в не зависимости, ограничены ширины блоков или нет.

Данное свойство имеет следующие значения:

• stretch – это значение по умолчанию и заставляет блоки flex item занимать все доступное пространство по поперечной оси;
• flex-start – блоки выравниваются по краю cross start;
• flex-end – по противоположному караю cross end;
• center – элементы располагаются в центре;
• baseline – элементы размещаются, так, чтобы их базисные линии совпадали.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Данное свойство работает, когда флекс элементы заворачиваются в несколько рядов или колонок и действует на подобии justify-content но оказывает эффект не на элементы, а на ряды в целом и по поперечной оси.

Самые частые значения:

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

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

Это короткая запись для flex-direction и flex-wrap. Значения по умолчанию совпадает со значениями соответствующих свойств.

.container {
  flex-flow: row nowrap; /* Значения по умолчанию */
}

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

Допустимое значение для данного свойства это цело число от нуля и выше. Значение по умолчанию ноль, элемент не будет расширяться.

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

.item {
  flex-grow: 1;
}

Является аналогичным предыдущему, но определяет возможность элемента сжиматься. По умолчанию единица.

.item {
  flex-shrink: 2;
}

Данное свойство задает ширину элемента. Допускается цифровое значение в размерных единицах или ‘auto’.

.item {
  flex-basis: auto | 20% | 300px;
}

Это сокращенная запись предыдущих трех свойств и определяются в таком же порядке. Значение по умолчанию '0 1 auto'. Обязательным является только первый аргумент. Рекомендуется использовать именно короткую версию при верстке, так как это позволяет наглядно определить данные свойства и делает ваш CSS более коротким.

.item {
  flex: none | flex-grow flex-shrink flex-basis
;
}

Это свойство аналогично align-items, обладает теми же свойствами и работает точно также. Единственное отличие, в том, что там выравнивание задается для всех элементов (flex item) сразу, а тут, индивидуально для каждого элемента.

Используя свойство order можно изменить порядок дочерних элементов независимо от их физического размещения в HTML коде. Допускаются любые целые числа. Значение по умолчанию ноль, в таком случае порядок будет таким каким он является в коде.

.item:first-child {
  order: 2;
}
.item:last-child {
  order: 1;
}