[8 урок] Flexbox CSS
Почему Flexbox?
Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование .
С их помощью сложно или невозможно достичь следующих простых требований к макету :
- Вертикального выравнивания блока внутри родителя.
- Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
- Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!
Display: flex
Для начала нам нужно добавить к блоку с содержимом display:flex;
.container {
display: flex;
}Теперь можем поговорить про расположение объектов.
flex-direction
Свойство flex-direction помогает нам определить положение объектов в контейнере.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
1. flex-direction: row - данное свойство задается по стандарту и располагает элементы справа налево, по горизонтали.
2. flex-direction: row-reverse - главное отличие от row, это то, что элементы располагаются в обратном порядке, т.е. слева на право.
3. flex-direction: column - это свойство расположит элементы вертикально, т.е. сверху вниз.
4. flex-direction: column-reverse - это свойство расположит элементы вертикально и в обратном порядке.
flex-wrap
По умолчанию все элементы flex будут пытаться поместиться в одну строку. Вы можете изменить это и разрешить элементам переноситься по мере необходимости с помощью этого свойства.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}1. flex-wrap: nowrap - все элементы будут пытаться поместиться в одну строку
2. flex-wrap: wrap - элементы будут переноситься по мере необходимости
3. flex-wrap: wrap-reverse - reverse работает так же как и в предыдущих случаях
flex-flow
Это сокращенное обозначение свойств flex-direction и flex-wrap, т.е. это мы используем для экономии места в css коде.
.container {
flex-flow: column wrap;
}justify-content
Cвойство justify-content определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера, или вдоль строчной оси grid контейнера.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}1. justify-content: flex-start - элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
2. justify-content: flex-end - элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction).
3. justify-content: center - элементы располагаются друг за другом в центре контейнера по главной оси.
4. justify-content: space-between - Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.
5. justify-content: space-around - Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.
6. justify-content: space-evenly - Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.
7. justify-content: start - Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
8. justify-content: end - Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
9. justify-content: left - Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start.
10. justify-content: right - Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start.
align-items
свойство align-items выравнивает flex-элементы текущей flex-линии таким же образом, как и justify-content, но в перпендикулярном направлении.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}1. align-items: stretch - элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
2. align-items: flex-start - край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.
3. align-items: flex-end/end/self-end - элементы располагаются в конце поперечной оси.
4. align-items: flex-start/ start/ self-start - элементы располагаются в начале оси.
5. align-items: center - Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси.
6. align-items: baseline - Все элементы flex выровнены таким образом, что их базовые линии совпадают.
align-content
Свойство align-content устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси элемента типа flexbox или grid.
1. start - элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.
2. end - элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.
3. flex-start элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как start.
4. flex-end - элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как end.
5. center - элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.
6. normal - элементы расположены в их дефолтной позиции как если бы align-content не было определено.
7. baselinefirst baselinelast baseline
Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
Резервное выравнивание для first baseline равно start, для last baseline - end.
8. space-between - элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
9. space-around - элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.
10. space-evenly - элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.
11. stretch- если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого auto-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые max-height/max-width (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.
12. safe - используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был start.
13. unsafe - используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.
Дополнительные материалы для улучшения знаний по Flexbox:
1. http://www.flexboxdefense.com/