Главная » CSS3 » Flexbox
Символы юникода Notepad++ Сокращение Типографика Начало css index.html Микроразметка style.css Блоки DLE Теги DLE

Flexbox

Flexbox новая технология в CSS3 - для создания гибких макетов с выравниванием по вертикали и горизонтали.

Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами.

1. Чтобы ваш блок стал Флексом нужно просто дать ему свойство css3: {display: flex;} или {display:inline-flex}, разница практически в автоматической ширине блока, в первом варианте блок растягиваются горизонтально, чтобы заполнить содержащий их блок, вовторм, блоки встроенного уровня уменьшаются, чтобы соответствовать их размеру внутренего содержания.

display: flex;

flex

display:inline-flex

inline-flex


2. Внутри Flex-контейнера, для дочерних элементов, не работают такие CSS-свойства как float, clear, vertical-align, column-, ::first-line и ::first-letter.


3. !!! Flexbox можно применять - если Вам не нужна поддержка старых браузеров.

 
 Chrome Edge Firefox Internet Opera Safari
2912201112.19
 
 Android Chrome Edge Firefox Opera Safari Samsung
4.429Yes?12.1Yes?

Флекс в двух строчках

Флекс в двух строчках:

<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;}
.col-1 {flex: 1 0 100px;}
.col-2 {flex: 2 0 100px;}
.col-3 {flex: 1 0 100px;}
@media (max-width: 420px) {
.col-1 {flex: 1 0 100%;}
.col-2 {flex: 1 0 100%;}
.col-3 {flex: 1 0 100%;}
}
</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. 1. Не следует использовать flexbox там, где в этом нет необходимости.
  2. 2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
  3. 3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
  4. 4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
  5. 5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
  6. 6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент!

Полезно по FLEX:

1. Онлайн демонстрация свойств Флекс - перейти
2. Наглядный английский ресурс - перейти

Flexbox

Для описания модуля 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 302 0  

Примеры наиболее частого использованя flexbox в css. Просто так их не придумали и у флексов есть то чего невозможно сделать с помощью обычного css. У Флексов есть минус - в контейнере (display: flex;) не работает абсолютное позиционирование.!

flex
Flexbox 29 0  

Flex - это сокращеная запись 3 параметров: flex-grow, flex-shrink и flex-basis. Используется на практике очень редко!

flex-shrink - Коэффициент сжатия
Flexbox 214 0  

Свойство flex-shrink CSS устанавливает коэффициент сжатия flex-элемента. Если размер изгибаемых элементов больше, чем у гибкого контейнера, то элементы сжимаются, чтобы соответствовать размеру изгиба.

flex-basis - Начальный основной размер
Flexbox 175 0  

Свойство flex-basis устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера

flex-grow - Коэффициент роста
Flexbox 204 0  

Свойство flex-grow определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства.

align-items - Выравнивание по вертикальной оси
Flexbox 356 0  

Элементы Flex могут быть выровнены по поперечной оси текущей строки контейнера flex, аналогично justify-content, но в перпендикулярном направлении - align-items устанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные flex-элементы. Функция align-self позволяет переопределить это выравнивание по умолчанию для

order Порядок елемента в flex контейнере
Flexbox 199 0  

Свойство order контролирует порядок, в котором дочерние элементы flex-контейнера появляются в flex-контейнере, назначая их порядковым группам. Он принимает одно значение <integer>, которое указывает, к какой порядковой группе относится элемент flex.

Назад 1 2 Вперед

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020