Понимание 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. И это не просто полезный для обучения сервис, или интерактивная справка, но полноценный удобный помощник для предварительной верстки, где можно наглядно и просто все настроить, и даже, менять текст блоков.

Комментарии отключены
Как правильно писать CSS код - 5 простых эффективных правил
8
сентябрь
2017

Несколько простых правил, которые помогут избежать многих проблем при верстке.


Подробнее
Как точно расположить элемент внутри другого элемента
8
апрель
2013

Для этого нам послужит свойство position со значением absolute. Однако, значения top, right, bottom, left при значении position:absolute будут указываться относительно всего окна сайта.

Это верно, а чтобы значения работали относительно родительского элемента (внутри которого располагается объект), необходимо родительскому элементу присвоить значение position:relative

Это кажется простым, однако многие начинающие верстальщики сталкиваются с подобными проблемами.

Подобная техника позволяет приклеить к нужному месту вложенный объект.

Поясним на примере.


Подробнее
HTML5 визуальный редактор
22
май
2012
wysihtml5 - визуальный редактор HTML5
WYSIHTML5 это текстовый редактор с открытым исходным кодом, разработанный не кем-нибудь а самим Xing.
Редактор сделан полностью на HTML5 и не использует ни грамма JS, он очень легкий и работает довольно быстро.
Он преобразует поле textarea и обеспечивает основные функции редактирования текста, включая стили текста (жирный, курсив), списки, заголовки, вставка изображений и ссылок и окраски текста. Любителям браузера Chrome предоставляется возможность голосовой ввод текста.
Подробнее
Все статьи