CSS Flexbox: alignment, flex properties, and responsive layouts

To make a container a flex object:

.flex {
    display: flex;
}

Simulator: open_in_new http://flexboxfroggy.com .

Arrangement order

Set the property flex-direction for the parent:

.flex {
    display: flex;
    flex-directon: row;
}

Options for flex-directon:

• row - from left to right in a row (by default).
• row-reverse - from right to left in a row.
• column - from top to bottom.
• column-reverse - from bottom to top.

This is a kind of pipe in which the elements will be located. We specify the direction of the pipe.

Ширина элементов

Ширина элементов устанавливается обычным способом, но если все элементы не помещаются в один ряд, тогда ширина уменьшается. За это поведение отвечает свойство flex-wrap:

• no-wrap - ширина уменьшается, чтобы все элементы поместились в ряд.
• wrap - элементы сохраняют установленную ширину, и переносятся на новую строку.
• wrap-reverse - поведение такое же, как и у wrap, только новые элементы переносятся на строку выше.

Поток

Свойство flex-flow совмещает в себе два свойства:

• flex-direction.
• flex-wrap.

Example:

flex-flow: row no-wrap;

Выравнивание

По горизонтали

За выравнивание элементов вдоль трубы отвечает justify-content:

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

По вертикали

За выравнивание элементов по сечению трубы отвечает align-items.

• flex-start: Items align to the top of the container.
• flex-end: Items align to the bottom of the container.
• center: Items align at the vertical center of the container.
• baseline: Items display at the baseline of the container.
• stretch: Items are stretched to fit the container.