flex gap
gap це скорочений спосіб запису для вертикального і горизонтального відступу: row-gap і column-gap
Flexbox
Flexbox новая технология в CSS3 - для создания гибких макетов с выравниванием по вертикали и горизонтали.Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами.
1. Чтобы ваш блок стал Флексом нужно просто дать ему свойство css3: {display: flex;} или {display:inline-flex}, разница практически в автоматической ширине блока, в первом варианте блок растягиваются горизонтально, чтобы заполнить содержащий их блок, вовторм, блоки встроенного уровня уменьшаются, чтобы соответствовать их размеру внутренего содержания.
display: flex;
display:inline-flex
2. Внутри Flex-контейнера, для дочерних элементов, не работают такие CSS-свойства как float, clear, vertical-align, column-, ::first-line и ::first-letter.
3. !!! Flexbox можно применять - если Вам не нужна поддержка старых браузеров.
| Chrome | Edge | Firefox | Internet | Opera | Safari |
| 29 | 12 | 20 | 11 | 12.1 | 9 |
| Android | Chrome | Edge | Firefox | Opera | Safari | Samsung |
| 4.4 | 29 | Yes | ? | 12.1 | Yes | ? |
Флекс в двух строчках:
<div class="sect">
<div class="col-1">Эта колонка будет шириной 25%</div>
<div class="col-2">Эта колонка будет шириной 50%</div>
<div class="col-3">Эта колонка будет шириной 25%</div>
</div>
<style>
.sect {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
.sect > div {flex-basis: calc(100% / 3);} //на три блока
// можно и так
.col-1 {flex: 1 0 100px;}
.col-2 {flex: 2 0 100px;}
.col-3 {flex: 1 0 100px;}
</style>Сетка на флексах
====
html {height: 100%;}
body {display: flex; flex-direction: column; height: 100%;}
/* Главная секция заполнит все свободное место на странице, которое не занял футер */
.main {flex: 1 0 auto;}
/* Футер заполнит столько вертикального пространства, сколько ему будет нужно, ни пикселем больше */
footer {flex: 0 0 auto;}
----
<body>
<div class="main"> Весь контент будет здесь </div>
<footer> Футер </footer>
</body>
====
Выровнять колонки и содержимое по центру:
{display:flex; flex-direction: column; justify-content: center; align-content: space-between; align-items: center;}Лучшая демонстрация FLEX: Смотреть
Демо основных свойств flex-контейнера - online-demo flex-direction, justify-content, align-items: Смотреть
Демо свойств многострочности в flex - flex-wrap, align-content Смотреть
Демо для flex-grow, flex-shrink и flex-basis Смотреть
Демо для align-self и order Смотреть
О минусах flex-блоков:
- 1. Не следует использовать flexbox там, где в этом нет необходимости.
- 2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
- 3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
- 4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
- 5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
- 6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент!
Полезно по FLEX:
1. Онлайн демонстрация свойств Флекс - перейти2. Наглядный английский ресурс - перейти
Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.
Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.
Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).
Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.
Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.
Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.
Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.
Примеры использования flexbox в css
Примеры наиболее частого использованя flexbox в css. Просто так их не придумали и у флексов есть то чего невозможно сделать с помощью обычного css. У Флексов есть минус - в контейнере (display: flex;) не работает абсолютное позиционирование.!
flex
Flex - это сокращеная запись 3 параметров: flex-grow, flex-shrink и flex-basis. Используется на практике очень редко!
flex-shrink - Коэффициент сжатия
Свойство flex-shrink CSS устанавливает коэффициент сжатия flex-элемента. Если размер изгибаемых элементов больше, чем у гибкого контейнера, то элементы сжимаются, чтобы соответствовать размеру изгиба.
flex-basis - Начальный основной размер
Свойство flex-basis устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера
flex-grow - Коэффициент роста
Свойство flex-grow определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства.
align-content - Пустое пространство по вертикали
Свойство CSS align-content устанавливает, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль поперечной оси контейнера flexbox.
align-self - выравнивание по вертикали для одного елемента
CSS-свойство align-self выравнивает flex-элементы текущей flex-линии, переопределяя значение align-items. Если любой из полей поперечной оси элемента установлен на auto, то align-self игнорируется.
align-items - Выравнивание по вертикальной оси
Элементы Flex могут быть выровнены по поперечной оси текущей строки контейнера flex, аналогично justify-content, но в перпендикулярном направлении - align-items устанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные flex-элементы. Функция align-self позволяет переопределить это выравнивание по умолчанию для
justify-content - Распределяет пространство между элементами
Свойство CSS justify-content определяет, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль главной оси гибкого контейнера и встроенной оси контейнера сетки.