center выровняйте элементы по центру контейнера.
.wrapper {
display: flex;
justify-content: center;
}
1
flex-start (по умолчанию) выравнивает элементы в начале контейнера.
.wrapper {
display: flex;
justify-content: flex-start;
}
1
flex-end выравнивает элементы в конце контейнера.
.wrapper {
display: flex;
justify-content: flex-end;
}
1
space-between align первый и последний элемент будут на одном уровне с краями контейнера, и все пространство будет равномерно распределено между элементами.
.wrapper {
display: flex;
justify-content: space-between;
}
1
2
пространство вокруг выравнивает элементы равномерно. Предметы имеют половинное пространство с обеих сторон.
.wrapper {
display: flex;
justify-content: space-around;
}
1
2
равномерно выровняйте предметы равномерно. Вокруг предметов должно быть равное пространство.
.wrapper {
display: flex;
justify-content: space-evenly;
}
1
2
============= ПО ВЕРТИКАЛИ ===========================
center выровняйте элементы по центру контейнера.
.wrapper {
display: flex;
align-items: center;
}
1
flex-start выравнивает элементы в начале контейнера.
.wrapper {
display: flex;
align-items: flex-start;
}
1
flex-end выравнивает элементы в конце контейнера.
.wrapper {
display: flex;
align-items: flex-end;
}
1
базовые элементы выравниваются, как и их базовые линии.
.wrapper {
display: flex;
align-items: baseline;
}
1
2
3
4
5
элементы stretch растягиваются, чтобы заполнить контейнер.
.wrapper {
display: flex;
align-items: stretch;
}
1
2
