Понимание flex или просто о непривычном

Фотография к материалу: Понимание flex или просто о непривычном
21
сентябрь
2017

FlexBox, или просто flex, это новый способ верстки страницы или ее части. Его использование сильно отличается от привычных методов. Однако его можно достаточно просто объяснить разделив набор параметров или свойств на две части: родительские и дочерние.

Для простоты, здесь и далее, родительский элемент будем называть контейнером, а дочерние элементы блоками или просто элементами.

Контейнер

Его параметры отвечают за настройку поведения блоков внутри него. Есть две оси: главная и поперечная. Если главная ось выбрана "ряд", то поперечная становится "колонкой". Либо наоборот.

  • display - вид отображения блоков внутри: flex (блочный - аналог block) или inline-flex (строчный - аналог inline-block)
  • flex-direction - направление или выбор главной оси (слева направо, справа налево, сверху вниз, снизу вверх)
  • justify-content - выравнивание по главной оси
  • align-items - выравнивание по поперечной оси
  • flex-wrap - многострочная организация блоков
  • align-content - способ выравнивания по вертикали (только многострочный режим)

Параметры flex-direction и flex-wrap могут группироваться в короткую запись flex-flow, становясь первым и вторым значением соответственно, перечисленными через пробел.

Например так (указаны значения по умолчанию): "flex-flow: row nowrap;".

Блоки (элементы)

Параметры блоков отвечают за характеристики всех или отдельных блоков внутри контейнера.

  • flex-grow - жадность
  • flex-shrink - сжимаемость
  • flex-basis - базовый размер
  • order - порядок размещения или вес
  • align-self - выравнивание по поперечной оси

Параметры flex-grow, flex-shrink и flex-basis могут группироваться в короткую запись flex, становясь первым, вторым и третьим значением соответственно, перечисленными через пробел.

Пример (указаны значения по умолчанию): "flex: 0 1 auto;".

На интерактивном примере можно очень быстро вникнуть в суть. Поэтому просто попробуйте генератор на нашем сайте. Там же можно посмотреть поддержку браузерами технологии flex. И это не просто полезный для обучения сервис, или интерактивная справка, но полноценный удобный помощник для предварительной верстки, где можно наглядно и просто все настроить, и даже, менять текст блоков.

Комментарии отключены
Простые всплывающие по нажатию подсказки на JavaScript
6
октябрь
2017

Рассмотрим подробно как сделать простые всплывающие подсказки или окна на JavaScript, которые открываются и закрываются по клику по ним или рядом с ними. При этом может быть открыта только одна из них. Будем использовать JavaScript и CSS без jQuery. Кому нет нужды разбираться, можно взять готовый код.


Подробнее
Календарь для сайта с возможностью выбора даты
17
ноябрь
2017

Попробуйте простой для установки, удобный для использования, маленький по размеру, гибкий для настройки, но функциональный и совершенно бесплатный календарь.


Подробнее
Разбираем простую AJAX функцию
27
декабрь
2017

Давайте разберем простейшую функцию, которая работает просто вот так: ajax("?param=123");


Подробнее
Все статьи