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

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

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow. Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto; свойство не будет оказывать влияния. Свойство не наследуется.

justify-content
Значения:
`flex-start`	Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера.
`flex-end`	Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера.
`center`	Flex-элементы выравниваются по центру flex-контейнера.
`space-between`	Flex-элементы равномерно распределяются по линии. Первый flex-элемент помещается вровень с краем начальной линии, последний flex-элемент — вровень с краем конечной линии, а остальные flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если оставшееся свободное пространство отрицательно или в строке присутствует только один flex-элемент, это значение идентично параметру `flex-start`.
`space-around`	Flex-элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными flex-элементами было одинаковым, а расстояние между первым / последним flex-элементами и краями flex-контейнера составляло половину от расстояния между flex-элементами.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

.flex-container {
display: -webkit-flex; 
-webkit-justify-content: flex-start;
display: flex;
justify-content: flex-start;
}

Выравнивание по поперечной оси: align-items и align-self

Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto, align-self не имеет никакого влияния.

Align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.

align-items
Значения:
`flex-start`	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей `margin` и рамок `border` элемента), проходящей через начало поперечной оси.
`flex-end`	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей `margin` и рамок `border` элемента), проходящей через конец поперечной оси.
`center`	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
`baseline`	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
`stretch`	Если поперечный размер flex-элемента вычисляется как `auto` и ни одно из поперечных значений `margin` не равно `auto`, элемент растягивается. Значение по умолчанию.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

.flex-container {
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}

Align-self

Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.

align-self
Значения:
`auto`	Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве `align-items` flex-контейнера.
`flex-start`	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей `margin` и рамок `border` элемента), проходящей через начало поперечной оси.
`flex-end`	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей `margin` и рамок `border` элемента), проходящей через конец поперечной оси.
`center`	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
`baseline`	Flex-элемент выравнивается по базовой линии.
`stretch`	Если поперечный размер flex-элемента вычисляется как `auto` и ни одно из поперечных значений `margin` не равно `auto`, элемент растягивается. Значение по умолчанию.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-align-self: center; 
align-self: center;
}

Выравнивание строк flex-контейнера: align-content

Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content. Свойство не влияет на однострочный flex-контейнер. Не наследуется.

align-content
Значения:
`flex-start`	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
`flex-end`	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
`center`	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
`space-between`	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично `flex-start`. В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
`space-around`	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент`center`. В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
`stretch`	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично `flex-start`. В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

.flex-container {
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: flex-end; 
display: flex;
flex-flow: row wrap;
align-content: flex-end;
height: 100px;
}