Основная задача Flexbox — это сделать работу слоев гибким, а работу понятной.
У нас есть 4-ре элемента div в сером контейнере div
По умолчанию браузер выстраивает все элементы на странице в столбец сверху вниз
Теперь чтобы начать работать с flex-элементом на нужно сделать общий div flex-контейнером и делается это так:
В результате получаем следующее:
Как видим все квадраты становятся в ряд.
У контейнера есть две оси: главная ось и перпендикулярная ей.
По умолчанию все элементы всегда располагаются вдоль главной оси, с лева на право, поэтому они и выровнялись в линию когда применили свойство Display: Flex;
В то же время мы можем вращать главную ось применив свойство: Flex Direction
При этом свойство flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.
Еще есть пару полезных свойств для flex-direction: row-reverse и column-reverse.
Justify-content отвечает за выравнивание элементов по главной оси.
Justify-content может принимать 5 значений:
1. flex-start;
2. flex-end;
3. center;
4. space-between;
5. space-around.
1 значение:
2 значение:
3 значение:
4 значение:
5 значение:
Space-between задает одинаковое расстояние между квадратами, а space-around одинаковое расстояние между квадратами и контейнером.
Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.
Вернемся обратно к flex-direction: row и пройдемся по командам align-items оно также может принимать 5-ть значений:
1. flex-start;
2. flex-end;
3. center;
4. stretch;
5. baseline.
1 значение:
2 значение:
3 значение:
4 значение:
5 значение:
Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto. Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:
т.е. внутри не будет контента.
Также свойства justify-content с align-items можно объединять и выравнивать по двум осям:
Display: Flex
У нас есть 4-ре элемента div в сером контейнере div
По умолчанию браузер выстраивает все элементы на странице в столбец сверху вниз
Теперь чтобы начать работать с flex-элементом на нужно сделать общий div flex-контейнером и делается это так:
В результате получаем следующее:
Как видим все квадраты становятся в ряд.
Flex Direction
У контейнера есть две оси: главная ось и перпендикулярная ей.
По умолчанию все элементы всегда располагаются вдоль главной оси, с лева на право, поэтому они и выровнялись в линию когда применили свойство Display: Flex;
В то же время мы можем вращать главную ось применив свойство: Flex Direction
При этом свойство flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.
Еще есть пару полезных свойств для flex-direction: row-reverse и column-reverse.
Justify Content
Justify-content отвечает за выравнивание элементов по главной оси.
Justify-content может принимать 5 значений:
1. flex-start;
2. flex-end;
3. center;
4. space-between;
5. space-around.
1 значение:
2 значение:
3 значение:
4 значение:
5 значение:
Space-between задает одинаковое расстояние между квадратами, а space-around одинаковое расстояние между квадратами и контейнером.
Align Items
Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.
Вернемся обратно к flex-direction: row и пройдемся по командам align-items оно также может принимать 5-ть значений:
1. flex-start;
2. flex-end;
3. center;
4. stretch;
5. baseline.
1 значение:
2 значение:
3 значение:
4 значение:
5 значение:
Стоит заметить, что для align-items: stretch высота квадратов должна быть равна auto. Для align-items: baseline теги параграфа убирать не нужно, иначе получится вот так:
т.е. внутри не будет контента.
Также свойства justify-content с align-items можно объединять и выравнивать по двум осям: