Css3 — Помогите разобраться почему не работает Flex!!


Содержание

Полное руководство по Flexbox

Введение

Модуль разметки Flexbox ( от английского Flexible Box – гибкий блок ), находящийся на данный момент на этапе « Возможная рекомендация » стандартизации W3C ( W3C Candidate Recommendation ) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически ( вот почему его назвали «гибкий» ).

Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину ( и порядок ) его элементов для оптимального заполнения доступного пространства ( в основном для поддержки всех видов и размеров экранов ).

Flex -контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.

Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам ( блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально ).

И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости ( и это не игра слов ) для поддержки больших и сложных приложений ( особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее ).

Примечание : разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.

Основные понятия и термины

Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру ( родительскому элементу, известному как flex-контейнер ), в то время как другие должны быть применены к дочерним элементам ( назовем их flex-элементы ).

Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex -разметка базируется на направлениях flex -потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex -разметкой:

В основном, элементы будут размещены либо вдоль главной оси ( от точки main-start до main-end ), либо вдоль поперечной оси ( от точки cross-start до cross-end ):

  • main axis – это главная ось flex -контейнера, вдоль которой размещаются flex -элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction ( смотрите ниже );
  • main-start | main-end — flex -элементы располагаются внутри контейнера, начиная от точки main-start , и доходят до точки main-end ;
  • main size – это ширина или высота flex -элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
  • cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
  • cross-start | cross-end – flex -строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end ;
  • cross size – ширина или высота flex -элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.

Свойства родительского класса (flex-контейнера)

display

Это свойство определяет flex -контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex -контекст для всех его прямых потомков:

Отметим, что CSS -столбцы ( columns ) не имеют эффекта во flex -контейнере.

flex-direction

Это свойство задает главную ось, определяющую направление, в котором размещаются flex -элементы во flex -контейнере. Flexbox ( за исключением опционального обертывания ) является концептом однонаправленной разметки.

Представьте, что flex -элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:

  • row ( по умолчанию ): слева направо для ltr; справа налево для rtl;
  • row-reverse : справа налево для in ltr; слева направо для rtl;
  • column : так же как row , но сверху вниз;
  • column-reverse : так же как row-reverse , но снизу вверх.

flex-wrap

По умолчанию flex -элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:

  • nowrap ( по умолчанию ): однострочный / слева направо для ltr; справа налево для rtl ;
  • wrap : многострочный / слева направо для ltr ; справа налево для rtl ;
  • wrap-reverse : многострочный / справа налево для ltr ; слева направо для rtl .

flex-flow (применяется к родительскому элементу flex-контейнера)

Это сокращенная форма свойств flex-direction и flex-wrap , которые вместе определяют главную и поперечную оси flex -контейнера. По умолчанию задается значение row nowrap :

justify-content

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

  • flex-start (по умолчанию): элементы выравниваются к началу строки;
  • flex-end : элементы выравниваются к концу строки;
  • center : элементы выравниваются по центру строки;
  • space-between : элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
  • space-around : элементы распределяются в строке равномерно с одинаковым расстоянием между собой.

align-items

Это свойство определяет то, как по умолчанию располагаются flex -элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси ( перпендикулярной главной ):

  • flex-start : граница элементов cross-start располагается на линии cross-start ;
  • flex-end : граница элементов cross-start располагается на линии cross-end ;
  • center : элементы располагаются по центру поперечной оси;
  • baseline : выравнивание элементов происходит согласно базовой линии;
  • stretch ( по умолчанию ): элементы растягиваются для того, чтобы заполнить контейнер ( с учетом значений min-width/max-width ).

align-content

Это свойство позволяет выравнивать строки внутри flex -контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.

Примечание : это свойство не будет работать, если есть только одна строка flex -элементов:

  • flex-start : строки располагаются в начале контейнера;
  • flex-end : строки располагаются в конце контейнера;
  • center : строки располагаются посередине контейнера;
  • space-between : строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
  • space-around : строки размещены равномерно на одинаковом расстоянии друг от друга;
  • stretch ( по умолчанию ): строки растягиваются, чтобы заполнить оставшееся пространство.

Свойства дочерних элементов

(flex-элементы)

Order

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

flex-grow

Это свойство позволяет flex -элементу « разрастаться » в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex -контейнера может занять элемент.

Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:

Отрицательные числа недопустимы.

flex-shrink

Это свойство определяет для flex -элементов возможность сжиматься в случае необходимости:

Отрицательные числа недопустимы.

flex-basis

Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:

Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink и flex-basis ) задаются опционально. Значения по умолчанию: 0 1 auto :

align-self

Это свойство позволяет переопределить выравнивание, заданное по умолчанию ( или определенное свойством align-items ) для отдельных flex -элементов.

Доступные значения вы можете найти в описании свойства align-items :

Обратите внимание, что float , clear и vertical-align не работают с flex -элементами.

Примеры


Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:

Этот пример основывается на том факте, что свойство margin , установленное в значение auto , поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.

Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера ( для эстетичности ), но с возможностью автоматического заполнения.

Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо ( без использования медиа запросов ):

Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:

Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:

Давайте попробуем сделать еще лучше, поиграв с « гибкостью » flex -элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:

Использование префиксов для flexbox

Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.

А все потому, что спецификация flexbox менялась с течением времени, создав « old » ( старую ), « tweener «(промежуточную), и «new» (новую) версии.

Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer , который очень хорошо обрабатывает откаты к предыдущим версиям.

В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:

Поддержка браузерами

Разделена « версиями » flexbox на:

  • ( new ) – означает поддержку последнего синтаксиса из спецификации (например, display: flex; ).
  • ( tweener ) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox; ).
  • ( old ) – означает поддержку старого синтаксиса от 2009 года (например, display: box; ).
Chrome Safari Firefox Opera IE Android iOS
21+ (new)
20- (old)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (tweener)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

Браузер Blackberry версии 10+ поддерживает новый синтаксис.

Данная публикация представляет собой перевод статьи « A Complete Guide to Flexbox » , подготовленной дружной командой проекта Интернет-технологии.ру

Разбираемся с флексбоксами CSS

����‍�� Премиум-темы для Вордпресс с русскоговорящей поддержкой

Не так давно я у себя в инстаграме рассказывал о пополнении портфолио новым сайтом и отметил, что он был построен на флексбоксах. Выяснилось, что некоторые даже не слышали о его существовании. Странно, попробуем это исправить.

Не помню точно в каком году появилась блочная верстка. Я перешел на нее с табличной примерно в 2006. Не смотря на кучу новых семантических тегов HTML5 и новых свойств CSS3, подход к верстке в целом особо не менялся с годами — в основе всегда были позиционированные блоки. Сегодня блочная верстка практически умерла , как и когда-то табличная. На смену ей пришли и плотно заняли свое место флексбоксы и гриды (про гриды я расскажу отдельно). И это не просто очередные новомодные свойства CSS. Флексбоксы — это требование времени, вызванное необходимостью упрощения адаптивной верстки.

Я не ставлю целью сделать очередной справочник по флексам. Разберу несколько рабочих примеров, расскажу про основные свойства для тех, кто еще не знаком с флексами. А дальше каждый решит сам, нужно ему это или нет. Под каждым примером есть прямая ссылка на описание свойства в официальном источнике — сайте консорциума всемирной паутины.

Что такое флексбокс

Flexbox (CSS3 Flexible Box) — режим разметки, созданный для более предсказуемого упорядочения элементов на страницах, адаптированных под различные размеры экранов и устройств. В большинстве случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats), не схлопывают отступления flex-контейнера и его содержимого (margin collapse).

Однозначно, флексбоксы проще блоков — дочерние элементы внутри флексбокса могут размещаться в любом направлении, могут менять размер, чтобы адаптироваться к различным размерам дисплея. Более простое позиционирование элементов, независимость порядка отображения элементов от его положения в коде делает код более чистым.

Концепция флексбокса заключается в возможности изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Флекс-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.

Алгоритм разметки флексбоксами направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. При всех плюсах блочной верстки, ей сильно не хватало объективного механизма поддержки компонентов, меняющих ориентацию, размеры, форму при изменениях размеров или пропорций экрана.

Основные свойства флексбоксов

1. Порядок и ориентация

2. Позиционирование

3. Гибкость

Display

Флексбокс может быть блочным (flex) или строковым (inline-flex). Работает это в привычном для CSS виде.

Flex-direction

Направление оси контейнера может быть четырех видов:

  1. row — строка (по умолчанию);
  2. row-reverse — строка в обратном порядке;
  3. column — колонка;
  4. column-reverse — колонка в обратном порядке.

Flex-wrap

Управление переносом элементов.

  1. nowrap (по умолчанию) — элементы располагаются в один ряд или в одну колонку в зависимости от заданного flex-direction;
  2. wrap — элементы переносятся на следующий ряд;
  3. wrap-reverse — элементы переносятся на следующий ряд в обратном направлении.

Flex-flow

Сокращение свойств flex-direction и flex-wrap, которые определяют основную и поперечные оси контейнера. По-умолчанию row nowrap.

Order

Управление порядком элементов.

Например, чтобы выдвинуть вперед всех четвертый элемент, зададим ему order=-1.

Justify-content

Управление выравниванием по главной оси.

  1. flex-start — выравнивание от начала главной оси (по умолчанию);
  2. flex-end — выравнивание от конца главной оси;
  3. center — выравнивание по центру главной оси;
  4. space-between — выравнивание по главной оси, распределяя свободное пространство между собой;
  5. space-around — выравнивание по главной оси, распределяя свободное пространство вокруг себя.
  6. space-evenly — как space-around, только расстояние у крайних элементов до краев контейнера будет равным расстоянию между элементами.

Align-items

Выравнивание элементов по поперечной оси внутри ряда.

  1. flex-start — от начала поперечной оси;
  2. flex-end — от конца поперечной оси;
  3. center — по центру;
  4. baseline — по базовой линии;
  5. stretch — по всему пространству поперечной оси (по умолчанию).

Align-self

Выравнивание по поперечной оси отдельных элементов.

  1. auto — используется align-items родительского элемента (по умолчанию);
  2. flex-start — от начала поперечной оси;
  3. flex-end — от конца поперечной оси;
  4. center — по центру;
  5. baseline — по базовой линии;
  6. stretch — растягивается, занимая все пространство по высоте.

Align-content

Выравнивание внутри многострочного контейнера.

  1. flex-start — от начала главной оси;
  2. flex-end — от конца главной оси;
  3. center — по центру главной оси;
  4. space-between — по главной оси, распределяя свободное место между собой;
  5. space-around — по главной оси, распределяя свободное место вокруг себя;
  6. stretch — растягиваются, заполняя всю высоту (по умолчанию).

Flex-grow

Коэффициент увеличения элемента при наличии свободного пространства в контейнере.

По-умолчанию flex-grow: 0.

Flex-shrink

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

Flex-basis

Базовая ширина элемента для распределения свободного пространства контейнера.

В примере ширина четвертого элемента равна 50%, пятого — в зависимости от ширины контента.

В заключение

Вот в общем-то и вся основная информация по флексам. Этих знаний должно хватить для верстки любых макетов. Как видим, ничего сложного нет. Наоборот, позиционирование элементов сильно упрощается, экономит массу времени. Сами страницы получаются легкими, гибкими, быстрыми и адаптивными. На данный момент все популярные современные браузеры поддерживают флексбоксы.

Поддержка флексбоксов браузерами на 2020 год

Проблемы по старой традиции наблюдаются только у IE. Но и там при сильной необходимости можно найти решения.

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

Подпишитесь на рассылку
Один раз в месяц все новые материалы в одном письме

200 бесплатных наборов кистей для Фотошопа
503

Как в Фотошопе сменить русский язык на английский
190

Как быстро наполнить сайт на WordPress с помощью плагина WP All Import
172

25 лучших шаблонов для создания интернет-магазина на OpenCart
132

5 лучших книг по Вордпресс на русском языке
129


Как открыть *.CDR в Adobe Illustrator
121

Как быстро удалить все исходящие заявки в друзья во Вконтакте
120

10 рекомендуемых книг-бестселлеров по PHP
118

Как использовать Media Query в JavaScript
102

20 лучших шаблонов Вордпресс для сферы услуг
91

Установка временнОй зоны в PHP
89

Как импортировать большую базу данных MySQL в обход ограничений phpMyAdmin
87

Подключаем цели Яндекс Метрики к WordPress Contact Form 7
83

Как включить мультисайт и создать сеть сайтов на Вордпресс
81

20 лучших Вордпресс шаблонов для образовательных сайтов
72

Как скачать приватное видео из фейсбука
62

Как разрешить загрузку SVG и других форматов файлов в Вордпресс?
53

Как отправить большое видео в Ватсап
51

10 лучших Вордпресс шаблонов на тему оружия и охоты
51

Новый способ подключения целей Метрики и Аналитики к формам WordPress Contact Form 7
50

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Flexbox в CSS

Статья-шпаргалка по FlexBox. Сравнительно новая модель верстки известная как Flexbox, становится все популярнее. В первую очередь за счет удобного использования при создании каркасов и верстки отдельных элементов HTML страницы. Во вторую, за счет совершенно новых возможностей. В этой статье я попробую разобраться во всех тонкостях Flexbox и доступно поделиться знаниями с вами.

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» — приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox, создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся — логика наше все!

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

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

Главная ось — главное направление движения элементов внутри контейнера. Направление главной оси можно изменить с помощью свойства flex-direction. Обратите внимание, что при смене осей, меняются только направления движения блоков внутри, а начало, конец и размер контейнера остаются прежними.

Начало и конец главной оси — элементы располагаются от начала и до конца контейнера.

Поперечная ось — направление движения элементов, когда они не умещаются в контейнер по направлению главной оси. Поперечная ось всегда перпендикулярна (⊥) главной.

Начало и конец поперечной оси — по поперечной оси заполняются ряды от начала и до конца контейнера. В каждом таком ряду располагаются элементы (читайте ниже).

  • Размер (главный и поперечный) — базовая величина по которой высчитывается ширина или высота внутренних элементов, если размер указан не точно (указан в процентах или не указан вообще, а элемент должен растянуться или сжаться).
  • Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

    После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (⊥), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (→), а кросс ось соответственно вертикальная и направлена сверху вниз (↓).

    Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (↓) и когда перестанут вмещаться в высоту то будут двигаться слева направо (→) — то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется — меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут — это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали. См. пример.

    Цукерберг рекомендует:  Обучение - Как в питоне отследить нажатие клавиш клавиатуры

    Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы понять о чем речь, давайте представим что есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать по вертикали мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству align-content. А вот так это выглядит схематически:

    CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции. Тут используется другая модель построения макета и эти css свойства просто игнорируются.

    CSS свойства Flexbox

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

    Включает flex свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня — они станут элементами flex контейнера.

    • flex — элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
    • inline-flex — элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

    flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

    Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

    • row (default) — направление элементов слева направо (→)
    • column — направление элементов сверху вниз (↓)
    • row-reverse — направление элементов справа налево (←)
    • column-reverse — направление элементов снизу вверх (↑)

    Нужно понимать, что при переходе с row на column или с row-reverse на column-reverse меняется только направление осей и больше ничего. Начало и конец расположения блоков остается неизменным (см. картинку в начале). Т.е. если при row элементы начинали свой путь справа/сверху, то при column все останется также — изменится только направление. (см. пример свойства flex-wrap)

    Управляет переносом непомещающихся в контейнер элементов.

    • nowrap (default) — вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
    • wrap — включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
    • wrap-reverse — тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

    меню

    flex-flow: direction wrap

    Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

    flex-flow принимает значения двух этих свойств, разделенные пробелом. Или можно указать одно значение любого свойства.

    Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

    • flex-start (default) — элементы будут идти с начала (в конце может остаться место).
    • flex-end — элементы выравниваются по концу (место останется в начале)
    • center — по центру (место останется слева и права)
    • space-between — крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

    Заметка: Работает когда есть как минимум 2 ряда, т.е. при наличии только 1 ряда ничего не произойдет.

    Т.е. если flex-direction: row , то это свойство будет выравнивать невидимые ряды по вертикали ¦ . Тут важно заметить, что высота блока должна быть задана жестко и должна быть больше высоты рядов иначе сами ряды будут растягивать контейнер и любое их выравнивание теряет смысл, потому что между ними нет свободного места. А вот когда flex-direction: column , то ряды движется по горизонтали → и ширина контейнера почти всегда больше ширины рядов и выравнивание рядов сразу приобретает смысл.

    Это свойство мало где нужно и вместо него чаще используется align-items (см.ниже).

    • stretch (default) — ряды растягиваются заполняя строку полностью
    • flex-start — ряды группируются в верхней части контейнера (в конце может остаться место).
    • flex-end — ряды группируются в нижней части контейнера (место останется в начале)
    • center — ряды группируются по центру контейнера (место останется по краям)
    • space-between — крайние ряды прижимаются к краям (место между рядами распределяется равномерно)
    • space-around — свободное пространство равномерно распределяется между рядами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
    • space-evenly — тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

    меню

    Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

    • stretch (default) — элементы растягиваются заполняя строку полностью
    • flex-start — элементы прижимаются к началу ряда
    • flex-end — элементы прижимаются к концу ряда
    • center — элементы выравниваются по центру ряда
    • baseline — элементы выравниваются по базовой линии текста

    меню

    Для элементов контейнера

    Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.

    По умолчанию flex-grow: 0

    • Если всем элементам указать flex-grow:1 , то все они растянуться одинаково и заполнять все свободное место в контейнере.
    • Если одному из элементов указать flex-grow:1 , то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего.
    • При flex-grow:1 . Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
    • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
    • При flex-grow:3 . Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

    Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow:2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-grow:0.5

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

    По умолчанию flex-shrink:1

    Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px — flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

    Заметка: в значении можно указывать дробные числа, например: 0.5 — flex-shrink:0.5

    Устанавливает базовую ширину элемента — ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px, em, rem, %, vw, vh и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. При auto элемент получает базовую ширину относительно контента внутри него.


    По умолчанию: auto

    Иногда лучше установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink . Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis. Пример смотрите в заметках.

    flex-basis будет «жестким», если обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; . Все это можно записать так flex:0 0 200px; .

    Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

    По умолчанию: flex: 0 1 auto

    Однако можно указать и одно, и два значения:

    Позволяет изменить свойство align-items , только для отдельного элемента.

    По умолчанию: от align-items контейнера

    • stretch — элемент растягиваются заполняя строку полностью
    • flex-start — элемент прижимаются к началу строки
    • flex-end — элемент прижимаются к концу строки
    • center — элемент выравниваются по центру строки

    baseline — элемент выравниваются по базовой линии текста

    Позволяет менять порядок (позицию, положение) элемента в общем ряду.

    По умолчанию: order: 0

    По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 . . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

    Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

    Чем отличается flex-basis от width?

    Ниже важные различия между flex-basis и width / height:

    flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). Смотрите пример.

    flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

    Абсолютные элементы контейнера не участвуют во flex конструкции. А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

  • При использовании свойства flex 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.
  • По возможности все же отдавайте предпочтение flex-basis . Используйте width только когда не подходит flex-basis .

    Отличие flex-basis от width — баг или фича?

    Контент внутри flex элемента распирает его и не может выйти за его пределы. Однако если установить ширину через width или max-width , а не flex-basis , то элемент внутри flex контейнера сумеет выйти за пределы этого контейнера (иногда нужно именно такое поведение). Пример:

    Примеры Flex верстки

    В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры смотрите в последних версиях Chrome или Firefox.

    #1 Простой пример с выравниванием по вертикали и горизонтали

    Начнем с самого простого примера — выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

    Или так, без блока внутри:

    #1.2 Разделение (разрыв) между элементами флекс блока

    Чтобы расположить элементы контейнера по краям и произвольно выбрать элемент после которого будет разрыв, нужно использовать свойство margin-left:auto или margin-right:auto .

    #2 Адаптивное меню на flex

    Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #3 Адаптивные 3 колонки

    Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

    Обратите внимание, что сделать это можно без использования media правил, все на flex.

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #4 Адаптивные блоки на flex

    Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

    Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

    #5 Галерея на flex и transition

    Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

    #6 Флекс во флекс (просто пример)

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

    Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат — текст начинался с одной линии.

    Еще примеры

    Поддержка браузерами — 98.3%

    Полной поддержки разумеется нет, однако все современные браузеры поддерживают flexbox конструкции. Для некоторых все еще нужно указывать префиксы. Для реальной картины заглянем в caniuse.com и видим, что без префиксов будут работать 96.3% используемых сегодня браузеров, с префиксами 98.3%. Это отличный показатель для того чтобы смело использовать flexbox.

    Чтобы знать какие префиксы актуальны на сегодня (июнь. 2020), приведу пример всех flex правил с нужными префиксами:

    Лучше если свойства с префиксами будут идти до оригинального свойства.
    В этом списке нет ненужных на сегодня (по caniuse) префиксов, но вообще префиксов больше.

    Chrome Safari Firefox Opera IE Android iOS
    20- (old) 3.1+ (old) 2-21 (old) 10 (tweener) 2.1+ (old) 3.2+ (old)
    21+ (new) 6.1+ (new) 22+ (new) 12.1+ (new) 11+ (new) 4.4+ (new) 7.1+ (new)
    • (new) — новый синтаксис: display: flex; .
    • (tweener) — старый неофициальный синтаксис 2011 года: display: flexbox; .
    • (old) — старый синтаксис 2009 года: display: box;

    меню

    Ну и не забывайте про видео, там порой тоже интересно и понятно. Вот парочка популярных:

    Полезные ссылки по Flex

    Flexplorer — наглядный конструктор flex кода.

    flex.ru Узнать Статус Сейчас

    Вы столкнулись с проблемой, пытаясь открыть сайт flex.ru ? Узнайте, может быть, проблемы с вашей стороны или же сайт упал.
    Проверьте состояние flex.ru – может сайт упал, или же проблема у вас!

    flex.ru Состояние на Сегодня

    flex.ru Статус Отключений по Всему Миру

    Пошаговая Инструкция если flex.ru упал

    Q: Что делать если flex.ru упал?

    Если flex.ru на самом деле не «упал» но не доступен на вашей системе, попробуйте альтернативу этому сайту.

    Однако во многих случаях, проблема объясняется неправильным DNS. В этом случае, просто используйте этот IP (80.252.128.253), введите его в адресную строку вашего браузера и нажмите ввод. Если это сработает, то будьте уверены – проблема в DNS. Исправить его можно здесь.

    Q: Что если flex.ru на самом деле упал?

    Если flex.ru на самом деле упал, вы можете:

    Попробовать альтернативную ссылку, к примеру m. flex.ru , имя сайта с «www» и без.

    Подождать – большинство зависаний и других неполадок не длятся долго.

    Оставить запрос на форуме, блоге, странице фейсбука – обычно менеджеры выкладывают информацию о планируемых работах на сайте, так что всегда полезно взглянуть.

    Попробовать альтернативу – Нажмите, чтобы посмотреть, если таковая есть. В большинстве случаев вы ее легко можете найти!

    Как работает Flex-grow в CSS. Подробное руководство

    Очень много людей у меня спрашивают как правильно работает flex-grow и как вообще им оперировать. Это конечно очень хитрое свойство, но если в нём разобраться, то оно не представляет собой ничего сложного, нужно только захотеть и приложить небольшие усилия. К сожалению, в рунете я не нашел достойной статьи, которая рассказывает в деталях про flex-grow , были только небольшие отрывки по работе с дробями.

    Но я нашел статью `flex-grow` is weird. Or is it?, которая максимально ясно показывает то, как работает flex-grow и то, как он рассчитывается. Ниже будет её перевод на русский язык.

    Как только я узнал о flex-grow , то сразу же сделал простое демо, чтобы посмотреть как оно работает и что вообще делает.

    Я думал, что во всём разобрался, но когда я попытался применить его на сайте, который недавно сделал мой коллега, то ничего не заработало так, как ожидалось. Что мы только ни делали, а шаблон всё не выглядел и не работал так, как бы мы хотели в моей демке. Это заставило меня переосмыслить всё, что я до этого знал о flex-grow .

    Как flex-grow НЕ работает

    Перед тем как мы углубимся в функционал flex-grow , я бы хотел объяснить вам то, что я сделал неверно в первый раз.

    Я думал, что все flex элементы с flex-grow с параметром 1 будут иметь одинаковую ширину. А если один из элементов будет иметь flex-grow с параметром 2, то этот элемент будет в два раза больше чем другие в этой группе.

    Это звучит великолепно. Кажется, что именно так все и происходит в примере указанном выше. Родительский элемент имеет ширину 900px , секция с flex-grow:2 получает ширину в 600px , а боковой элемент с flex-grow:1 имеет ширину 300px .

    Как вы видите, в этой демке все работает просто идеально, но это так не работает в реальной жизни, даже если бы мы использовали тот же самый CSS код. Оказывается, что проблема была не в самом с CSS, а в контенте, вернее в его недостатке. Демка, которую я сделал — она работает, да, но только потому что там использовались два пустых элемента, созданные для тестирования и в итоге оказавшиеся слишком простыми для того, чтобы показать все важные моменты этого свойства.


    Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
    Вы можете его поддержать через Яндекс.Деньги. Спасибо.

    Как Flex-grow работает на самом деле

    Только что я объяснил как flex-grow не работает, но я показал вам демо, которое на самом деле не делает то, что по моим утверждениям это не делает. Далее в статье я вам объясню причину этого.

    Чтобы прояснить ситуацию, позвольте показать вам еще один Pen. В нём такие же установки, как и в первом, но на этот раз секция и боковые элементы не пустые. Теперь соотношение больше не 2:1 и элемент с flex-grow выставленным на один больше, чем элемент с flex-grow на 2.

    #Объяснение

    Если мы применим display:flex для родительского элемента и ничего больше не поменяем, то дочерние элементы встанут горизонтально, не смотря ни на что. Если будет недостаточно места, то они сократятся в размере. С другой стороны, если будет слишком много места, то они не будут расти, потому что Flexbox хочет, чтобы мы определили насколько им нужно вырасти. Таким образом, прежде чем указывать браузеру каким по ширине должен быть элемент, flex-grow определяет как оставшееся место распределяется среди flex элементов и насколько велика доля каждого из них.

    Или другими словами:
    Flex контейнер распределяет свободное место своим элементам, пропорционально их flex-grow фактору, чтобы заполнить контейнеры или урезать их, пропорционально их flex-shrink фактору, для того того, чтобы пресечь переполнение контейнера.

    #Демонстрация
    Эту концепцию гораздо проще понять, если мы её визуализируем.

    Во-первых мы выставим display свойство для нашего родительского элемента на flex и сделав это наши дочерние элементы станут flex-элементами и будут горизонтально расставлены друг за другом.

    Далее, мы решаем сколько частей свободного места получит каждый элемент. В нашем предыдущем примере первый элемент получил 2/3 оставшегося места flex-grow:2 и второй элемент 1/3 flex-grow:1 . Зная сколько flex-grow значений мы можем иметь в сумме, мы будем знать на какое число делить оставшееся место.

    Наконец-то у нас есть количество распределяющихся частей. Каждый элемент получает соответствующее количество частей, основываясь на его flex-grow значении.

    #Считаем
    Теории и визуальные представления это хорошо, но давайте по пачкаем руки и сделаем математические вычисления для примера выше.

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

    Ширина секции: 99px

    Ширина бокового элемента: 623px

    Общее количество flex-grow значений: 3

    1. Во первых нам надо рассчитать оставшееся место. Это довольно легко, мы возьмем ширину родителя и вычтем общую ширину изначальных дочерних элементов.

    2. Далее нам нужно определить размер каждого значения flex-grow

    Теперь, когда у нас есть оставшееся место, нам нужно определить на сколько частей мы хотим его разделить. Очень важно понимать, что мы не делим оставшееся место на количество элементов, а делим на общее количество flex-grow значений. В нашем случае это будет 3 ( flex-grow:2 + flex-grow:1 )

    3. Наконец-то разрезанное оставшееся место будет распределено между всеми элементами

    Основываясь на их flex-grow значениях секция получит 2 куска (2*59.33), а боковая сторона получит 1 кусок (1*59.33). Эти числа добавляются к изначальной ширине каждого элемента.

    99 + (2 * 59,33) = 217,66 (

    218px) | Изначальная ширина секции + (значение flex-grow для секции * размер одного flex-grow )

    623 + (1* 59.33) = 682.33 (

    682px) | Изначальная ширина боковой стороны + (значение flex-grow боковой стороны * размер одного flex-grow )

    Теперь вообще легко, правда?

    Отлично, но почему сработало первое демо?

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

    Ширина секции: 0px

    Ширина бокового элемента: 0px

    Общее количество flex-grow значений: 3

    1. Рассчитываем оставшееся место.

    2. Определяем размер каждого значения flex-grow

    3. Распределяем нарезанное свободное место

    Если ширина каждого элемента равна нулю, то оставшееся место равняется настоящей ширине родительского элемента и поэтому все выглядит так, будто flex-grow разделяет ширину элемента на равные пропорциональные части.

    flex-grow и flex-basis

    Давайте быстренько повторим: flex-grow берет оставшееся место и делит его на общее количество flex-grow значений. Полученный показатель умножается на соответствующее каждой части значение flex-grow и полученный результат добавляется каждому дочернему элементу с его изначальной шириной.

    Но что поделать, если нет оставшегося места или что делать в том случае, если мы не хотим полагаться на изначальную ширину элемента, но значение flex-grow надо выставить? Мы что, не можем использовать flex-grow ?

    Конечно же можем. Есть такое свойство, которое называется flex-basis , оно определяет изначальный размер элемента. Если вы используете flex-basis в связке с flex-grow, то механизм вычисления ширины изменится.

    Этот компонент устанавливает flex-basis , указывая его flex основу: изначальный главный размер flex элемента, перед тем как свободное пространство будет распределено в соответствии с flex факторами.

    Тут большая разница в том, что если мы применим flex-basis для элемента, то для вычислений мы не будем использовать его изначальный размер, а применим значение свойства flex-basis .

    Я адаптировал наш предыдущий пример, добавив flex-basis для каждого элемента. Вот он. Давайте посмотрим, как это происходит.

    1. Рассчитываем оставшееся место

    2. Определяем ширину элемента flex-grow

    3. Распределяем оставшееся место

    Небольшой оффтоп для завершенности дела, вам не нужно использовать исключительно пиксельные значения и надеяться на лучшее, проценты работают так же хорошо.

    Работа с box-моделью

    Чтобы покрыть вообще все сферы и ситуации, которые случаются с flex-grow , давайте посмотрим что будет, если мы добавим padding и margin . На самом деле ничего особенного. На первом шаге вычислений вам просто нужно не забыть также вычесть внешние отступы.

    Единственное, что вам нужно подметить, так это в случае с box-sizing flex-basis ведет себя как свойство width . Это означает то, что вычисления как и результат меняются, если box-sizing свойство меняется. Если box-sizing был выставлен на border-box , то вам надо работать только с flex-basis и margin значениями в ваших вычислениях, потому что значение padding уже включено в ширину.

    Несколько полезных примеров

    И так, достаточно математики. Давайте посмотрим несколько примеров того, как вы можете эффективно применить flex-grow в своих проектах.

    #Скажи нет width: [x]%
    Так как оставшееся место распределяется автоматически, нам не нужно думать о значениях ширины, если мы хотим, чтобы наши дочерние элементы заполняли весь родительский элемент.

    #Святой грааль трех колоночного “жидкого” макета с шириной в пикселях
    Смеси фиксированных и флюидных широт в column шаблонах возможны с флоатами, но это и не понятно и просто не гибкое решение. Конечно с помощью Flexbox и немного flex-grow и flex-basis магии это становится вполне возможным.

    #Заполняем оставшееся место любым элементом
    Если вы, к примеру, имеете поле ввода прямо за лейблом и хотите, чтобы это поле занимало все оставшееся место, вам больше не нужны убоговатые хаки в верстке. Смотрите.

    Прислушиваемся к спецификациям

    Следуя спецификации, нам стоит использовать flex сокращения, а не flex-grow напрямую.

    Но будьте аккуратны! Если вы просто будете использовать flex:1; некоторые из примеров выше не будут работать, потому что значения выставленные для всеобщего удобства не равны дефолтным значениям и это мешает нашим целям.

    Если вы хотите использовать flex в нашем случае, то вам нужно определять его параметры вот так:

    Заключение

    Flex-grow сложный и запутанный? Всё совсем не так плохо, как кажется. Нам нужно просто понять как он работает и что он делает. Если у элемента flex-grow выставлен на 3, это не означает того, что он будет в три раза больше чем элемент у которого flex-grow стоит с параметром 1. Это будет означать то, что он получит в три раза больше пикселей к изначальной ширине, чем другой элемент.

    Я выучил свой урок, тестируя flex-grow с двумя пустыми элементами, которые дали мне совершенно другое понимание того, что это свойство делает и это само собой привело меня к неверным заключениям. Вам нужно проверять новые фишки в среде, которая максимально приближена к реальности, тогда вы получите максимально реалистичное понимание того, как это работает и себя ведет.

    CSS3 flexbox практика | Эффект при наведении в CSS

    • CSS / CSS3
    • Flexbox CSS
    • JavaScript
      • JavaScript с нуля
      • JS и Jquery
    • Уроки по 1С-Битрикс
      • Контент менеджер
        • Авторизация на сайте
        • Элементы управления
        • Работа с информацией
        • Управление структурой
      • Сайт на 1С-Битрикс
        • Создание landing page
    • Видео новости
    • Модули расширений
    • Расширения и плагины
      • Bootstrap

    Дополнительное видео

    ПОДПИСКА на УРОКИ

    FLEX-BOX в CSS3 | Эффект при неведении

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


    See the Pen eePBRE by Denis (@Dwstroy) on CodePen.

    В текущем уроке поработаем с объектом изображений. При помощи transform и transition , сделаем по наведению следующую анимацию. Изображение немного повернем, увеличим иго в размерах, изменим цветокоррекцию. При наведении с левой стороны выезжают два блока с текстовой информацией. В нижней части появляется блок с иконками, которые подключим через сайт font-awesome. По наведению на иконку меняется цвет блока. Блоки иконок отобразим при помощи flex-box . Также блоки с изображением будут адаптивны, и подстраиваются под разные форматы экранов. Все это реализуем на flexbox и медиа запросах .

    И давайте приступим к описанию каркаса.

    Описываем каркас HTML

    Открываем свою среду разработки, в моем случае это phpstorm . В структуре его создаем файл index.html . В нем разворачиваю doctype , я это делаю при помощи аббревиатуры dws!! . Как делать такие сниппеты я показывал в отдельном уроке по плагину EMMET. В течение урока я часто буду использовать данные сокращения, а полное их описание можете посмотреть в моем справочнике по emmet.

    Прописываю в title «Адаптивный дизайн при помощи flexbox». Ниже идет мета тег viewport , он понадобится для адаптации элементов. За ним подключаем файл стилей, и отдельный файл для меди запросов, который будет запускаться при разрешение менее 900 пик.

    Давайте сразу создаем их в структуре. Делаем папку CSS , и создаем в ней два файла, style.css и media.css , к ним еще отдельно вернемся, а тут сразу создадим дополнительно папку img для изображений.

    Я заранее подготовил четыре картинки оного размера на 497х630 пик. копирую их в директорию jmg и возвращаемся в index файл.

    Далее идет подключение иконок через CDN , оставим ее. Bootstrap нам тут не нужен, я его удаляю. Подключение скриптов и jquery тоже удаляю. Класс .dws-wrapper оставляем, это будет нашей оберткой при помощи которого, я центрую блок посередине экрана.

    Далее пишем структуру при помощи emmet . Создаем блок для изображения, в нем вложено изображение, за ним идет заголовок третьего уровня, параграф, блок UL со списками, в нутрии которого разрешение ссылка и все это в количестве пяти штук.

    Жмем TAB и получили в принципе готовую структуру. Теперь заполним ее атрибуты и содержание списков.

    Вставим затем иконки, для этого перейдем на сайт fontawesome.ru , скачивать их мы не будем, так как подключаем их через CDN bootstrap .

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

    Атрибут aria-h можете удалить, данный параметр нам не понадобится.

    К самой структуре мы еще вернемся, а теперь перейдем в CSS и приступим к оформлению блоков.

    Оформляем стили блока с изображением в CSS файле

    Использую свою стандартную конструкцию для выравнивания блока и сбросов отступов у body .

    Далее оформим блок с изображением. Отбираем весь блок с классом .imageBox , добавляю ему стандартную обводку, что бы видеть его границы. Изображение нужно привести к одному размеру, для этого я добавляю фиксированную высоту в 270 пик. height: 270px , а для самого изображения задам минимальную ширину и высоту по 100%.

    Как видите, изображение равномерно заполнило область блока, а остальные элементы вышли за ее пределы.

    Давайте окончательно разберемся с картинкой. Трансформируем ее при наведении и добавим черно-белый фильтр. Увеличиваем картинку на 1.2 при помощи transform: scale(1.2) , затем немного повернем на 10 градусов при помощи rotate(-10deg) . Далее добавим фильтр filter: grayscale(.75) , по умолчанию значение 0 есть цветность, если 1 то черно белое, возьмем .75.

    Далее добавим :hover , а для плавности transition: .5s к самой картинке.

    А что бы изображение ни выходило за границы установленного блока, прописываем основному блоку overflow: hidden . Обводку уберем, а у изображения закруглим углы.

    Оформляем текстовые блоки

    Теперь можно переходить к текстовым блокам. Для начала отобразим их, закомментировав overflow . Для размещения их в нутрии блока, задействуем position , для класса .imageBox прописываем position: relative , а заголовку и параграфу присвоим position: absolute . Так как блоки будут анимироваться, зададим тут же transition: .8s .

    Затем с позиционируем каждый блок по отдельности. Начнем с заголовка, отбираем его и задаем верхний отступ в 45%. Для параграфа верхний отступ зададим в 58%, и для текста назначим белый цвет color: #ffffff , добавим темный задний фон с прозрачностью background-color: rgba(0, 0, 0, 0.45) , делаем внутренние отступы padding: 5px 15px и сбрасываем внешние margin: 0 . С левой стороны делаем вертикальную черту в 2 пик. border-left: 2px solid #c4c4c4 . Немного уменьшим текст заголовка и параграфа. И при помощи transform: translateX(-100%) скроим их за пределами блока.

    Само собой, при наведении будем возвращать их в нулевое положение transform: translateX(0) , и добавим отступы с левой стороны, что бы блоки не прилипали к левой части margin-left: 10px .

    С текстовыми блоками закончили, далее переходим к оформлению иконок.

    Оформляем иконки

    Отбираем блок ul и сбрасываем у него отступы.

    Для списков li убираем маркеры.

    Далее нужно отобразить списки Li по горизонтали. Для этого воспользуемся компоновкой элементов при помощи flexbox . Контейнер ul сделаем родителем flex-элементов . Добавляем display: flex , и все списки выровнялись по горизонтали. Для контейнера добавим прозрачный фон background: rgba(0,0,0, .2) , и для плавной анимации transition: .5s .

    Спискам li , зададим ширину в 20% и выроним иконки посередине блоков.

    Для иконок сделаем следующее оформление. Отбираем ссылки .imageBox ul li a , делаем их белым цветом, преобразуем их в блочные элементы display: block , и зададим внутренние отступы в 10 пик.

    Затем при помощи псевдокласса :nth-child() , каждому из элементов li зададим индивидуальный цвет. Для этого обращаемся к элементу li , далее пишем псевдокласс, а в скобках порядковый номер в списке :nth-child(1) , затем назначаем цвет.

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

    При помощи трансформации сдвинем блок по оси Y на -135%

    Раскомментируем overflow , соответственно блоки за пределами все скрылись. Для иконок добавим псевдокласс :hover , для того что бы их цвет появлялся при наведении и проверим, как все работает.

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

    Адаптируем под различные устройства

    На данный момент картинки все выстроились по вертикали, и изменяя размер экрана на них это не как не отражается. Адаптацию будем делать при помощи flexbox и media запросов.

    Добавим отдельный блок после класса .dws-wrapper , назовем его .flex-container , он и будет родителя flex дочерних блоков, то есть всех вложенных блоков с классом .imageBox .

    Убираем у класса .dws-wrapper стили для позиционирования блоков при помощи которых я выравнивал объекты посередине экрана. Для класса .flex-container задаем display: flex . Все дочерние flex-элементы выровнялись по горизонтали. При помощи justify-content: center , расположим их по центру экрана.

    Для удобства просмотра видео спущу эти блоки немного ниже, для этого классу .dws-wrapper пропишу margin-top: 280px . Вам это не обязательно делать, вы этот блок под свой дизайн сами подстроите, так как именно вам нужно. Этот класс я использую для записи видео урока и его можете не задействовать.

    По умолчанию у нас всегда flex-контейнер выкладывает flex-элементы в одну строку, а так как делаем адаптацию, соответственно количество элементов нужно выводить то, которое помещается на странице. Для этого есть замечательное свойство, называется flex-wrap , и по умолчанию у него значение установлено nowrap , а для того что бы они располагались в несколько рядов оставляем wrap . Теперь сжимая экран, flex-элементы перемещаются на следующую строку.

    Добавим между изображениями отступ, для этого классу .imageBox пропишем margin: 5px .

    Открываем файл media.css , который вначале создавали, в нем и будем описывать стили под разные форматы экранов. При помощи Emmet разворачиваю медиа запросы.

    Так как мы уже прописали в index файле что @media запросы будут запускаться при 900 пик. по этому две верхние строки нам не понадобятся я их удаляю.

    Как для примера, уменьшу на таком разрешение отступы с верху до 150 пик., но он для вас не обязательный это делать, я его прописываю что бы центровался блок по вертикали. Проверим результат.

    Немного подкорректирую @media запрос , сделаем его с 890 пик. само собой для вас может быть другой формат.

    Следующий запрос на 780 пик нам не понадобится, его удаляем. Блоки нормально подстраиваются, а вот под 480 пик проведем адаптацию,отступ с верху сделаю меньше, а саму картинку увеличим в размерах.

    Для текстовых блоков нужно изменить размеры и иконки тоже увеличим.

    На формате 320 пик. вернем изображение в исходное состояние, и подкорректируем заголовки с иконками.

    Проверяем полученный результат, и тестируем на разных форматах экрана.

    Я буду рад если урок по «CSS3 flaxbox практика | Эффект при наведении в CSS» вам понравился, обязательно поделитесь им в своей группе VK.

    ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

    Вся документация по свойству flex находится на официальном сайте.

    Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

    display

    inline-flex
    русский
    english

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

    Применяется ко: всем элементам.

    flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

    A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

    Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

    Applies to: all elements.

    flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

    flex-direction

    row-reverse
    column
    column-reverse
    русский
    english

    Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

    Применяется к: flex контейнерам.

    row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

    The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

    Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

    Applies to: flex containers.

    row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

    flex-wrap

    nowrap


    wrap-reverse
    русский
    english

    Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

    Применяется к: flex контейнерам.

    Значение по умолчанию: nowrap.

    nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

    The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

    For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

    Applies to: flex containers.

    Initial: nowrap.

    nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

    flex-flow

    row nowrap
    column-reverse
    column wrap
    row-reverse wrap-reverse
    русский
    english

    Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

    Применяется к: flex контейнерам.

    Значение по умолчанию: row nowrap.

    The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

    Applies to: flex containers.

    Initial: row nowrap.

    order

    русский
    english

    Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

    Применяется к: flex элементам.

    Значение по умолчанию: 0.

    The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

    A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

    Applies to: flex items.

    Initial: 0.

    justify-content

    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    русский
    english

    Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

    Применяется к: flex контейнерам.

    Значение по умолчанию: flex-start.

    flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

    The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

    Applies to: flex containers.

    Initial: flex-start.

    flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

    align-items

    flex-start
    flex-end
    center
    baseline
    stretch
    русский
    english

    Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

    Применяется к: flex контейнерам.

    Значение по умолчанию: stretch.

    flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

    Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

    If either of the flex item’s cross-axis margins are align-self has no effect.

    On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

    Applies to: flex containers.

    Initial: stretch.

    flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

    align-self

    flex-start
    flex-end
    center
    baseline
    stretch
    русский
    english

    Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

    Применяется кo: flex элементам.

    Значение по умолчанию: auto.

    flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

    Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)


    If either of the flex item’s cross-axis margins are align-self has no effect.

    On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

    Applies to: flex items.

    Initial: auto.

    flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

    align-content

    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
    stretch
    русский
    english

    Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

    Применяется к: flex контейнеру.

    Значение по умолчанию: stretch.

    flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

    The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

    Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

    Applies to: flex containers.

    Initial: stretch.

    flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

    Про CSS

    Flexbox

    Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.

    UPD от 02.02.2020: сделала удобную шпаргалку по флексбоксам, с живыми демками и описаниями из спеки: Flexbox cheatsheet.

    В примерах используется только новый синтаксис. На момент написания статьи правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают.

    Спецификация на английском есть тут: w3.org/TR/css3-flexbox.

    Согласно сайту caniuse.com, Flexbox не поддерживается 8 и 9-м IE и Opera Mini, а в других браузерах поддерживаются не все свойства и/или требуются префиксы.

    Это означает, что технологию нельзя широко использовать прямо сейчас, но уже самое время познакомиться с ней поближе.

    Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси.

    Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте.

    Приготовим полигон для экспериментов:

    Один родительский блок (желтый) и 5 дочерних.

    Display: flex

    И теперь родительскому элементу добавляем display: flex; . Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

    display: flex; делает все дочерние элементы резиновыми — flex , а не инлайновыми или блочными, как было изначально.

    Если родительский блок содержит картинки или текст без оберток, они становятся анонимными flex-элементами.

    Свойство display для Flexbox может принимать два значения:

    flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).

    inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).

    Flex-direction

    Направление раскладки блоков управляется свойством flex-direction .

    row — строка (значение по умолчанию); row-reverse — строка с элементами в обратном порядке; column — колонка; column-reverse — колонка с элементами в обратном порядке.

    row и row-reverse

    column и column-reverse

    Flex-wrap

    В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap .

    nowrap — блоки не переносятся (значение по умолчанию); wrap — блоки переносятся; wrap-reverse — блоки переносятся и располагаются в обратном порядке.

    Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow .

    Возможные значения: можно задавать оба свойства или только какое-то одно. Например:

    flex-flow: column; flex-flow: wrap-reverse; flex-flow: column-reverse wrap;

    Демо для row-reverse wrap-reverse :

    Order

    Для управления порядком блоков служит свойство order .

    Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1 :

    Justify-content

    Для выравнивания элементов есть несколько свойств: justify-content , align-items и align-self .

    justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

    justify-content отвечает за выравнивание по главной оси.

    Возможные значения justify-content :

    flex-start — элементы выравниваются от начала главной оси (значение по умолчанию); flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.

    flex-start и flex-end

    Align-items

    align-items отвечает за выравнивание по перпендикулярной оси.

    Возможные значения align-items :

    flex-start — элементы выравниваются от начала перпендикулярной оси; flex-end — элементы выравниваются от конца перпендикулярной оси; center — элементы выравниваются по центру; baseline — элементы выравниваются по базовой линии; stretch — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).

    Align-self

    align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.

    Возможные значения align-self :

    auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента; flex-start — элемент выравнивается от начала перпендикулярной оси; flex-end — элемент выравнивается от конца перпендикулярной оси; center — элемент выравнивается по центру; baseline — элемент выравнивается по базовой линии; stretch — элемент растягивается, занимая все пространство по высоте.

    Align-content

    Для управления выравниванием внутри многострочного flex-контейнера есть свойство align-content .

    flex-start — элементы выравниваются от начала главной оси; flex-end — элементы выравниваются от конца главной оси; center — элементы выравниваются по центру главной оси; space-between — элементы выравниваются по главной оси, распределяя свободное место между собой; space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя; stretch — элементы растягиваются, заполняя всю высоту (значение по умолчанию).

    Ps: Некоторые штуки мне так и не удалось увидеть в действии, например, строчку flex-flow: column wrap или полную запись того же flex-direction: column; flex-wrap: wrap; .

    Элементы стоят столбиком, но не переносятся:

    Не срабатывает wrap при flex-direction: column; , хотя в спеке это выглядит вот так:

    Думаю, со временем заработает.

    UPD от 21.06.2014: всё работает, если задать блоку высоту. За подсказку спасибо SelenIT2.

    Flex не работает вертикально

    Здесь вы можете увидеть полный код: https://codepen.io/typhoon93/pen/zabzyz/

    Я создал контейнер flex с классом: contact-details-links

    Ссылки внутри него связаны с классом «profile-link», и они задали высоту и ширину, а свойство flex shrink явно задано так: 1; Ниже приведен полный код:

    Когда вы начинаете уменьшать ширину страницы, чтобы поля «profile-link» начали переполняться, они не сокращаются. Я искал последний час, но не нашел ничего, что могло бы помочь мне здесь.

    У кого-нибудь есть идея, как это исправить?

    Если я удалю свойство height, элементы сжимаются хорошо, поэтому я предполагаю, что есть кое-что, что я не знаю о вертикальном сокращении этих предметов.

    1 ответ

    Темани ответил на мой вопрос в своем комментарии, в основном то, что я хочу, на самом деле невозможно, только с помощью свойства flex shrink — оно работает только в направлении главной оси, т. е. поскольку мой flex задан с направлением: row, он только сжимается мой пункт по горизонтали.

    Ответ будет дан, я сделаю то, что хочу делать с дополнительным кодом (медиа-запросы), или, возможно, изменю желаемый результат.

    CSS-свойства для flex-элементов

    На предыдущем уроке мы рассмотрели свойства для flex-контейнера. Настал черед узнать, какие свойства можно применять непосредственно к flex-элементам (дочерним элементам, расположенным внутри flex-контейнера).

    Свойство flex-basis

    Свойство flex-basis задает базовый размер flex-элемента по главной оси. Значение может быть указано в любых единицах измерения CSS, таких как проценты, пиксели и т. д. В качестве значения также принимается ключевое слово auto — тогда на размеры элемента влияют свойства width / height либо контент, который в нем содержится.

    Свойство flex-grow

    С помощью свойства flex-grow можно определить, какое количество свободного пространства может занять flex-элемент по сравнению с другими flex-элементами. В качестве значения указывается число (можно использовать целые и дробные числа), которое обозначает пропорции.

    Разберемся, как работает свойство flex-grow. По умолчанию дочерние элементы flex-контейнера выстраиваются друг за другом горизонтально. Если места не хватает, flex-элементы сужаются. Но если места достаточно, элементы не растягиваются — вы можете сами решать, насколько сильно они будут растянуты. Свойство flex-grow определяет, каким образом оставшееся свободное место распределяется между flex-элементами, и какая доля этого пустого пространства отводится для каждого из них. Иными словами, положительное свободное пространство «раздается» flex-элементам в указанных пропорциях (в зависимости от их значения flex-grow).

    Для примера: если для всех flex-элементов установлено значение flex-grow: 1 , а один из них получил значение flex-grow: 2 , то он займет в два раза больше свободного места, чем элементы со значением flex-grow: 1 . Обратите внимание, что размер самого элемента не будет вдвое увеличен.

    Свойство flex-shrink

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

    По своему действию данное свойство похоже на предыдущее, с той разницей, что здесь пространство не «раздается», а «отбирается», а количество этого отбираемого пространства зависит от указанного значения для flex-shrink , а также от flex-basis .

    Свойство flex

    Свойство flex является короткой записью и объединяет в себе три свойства: flex-grow , flex-shrink и flex-basis . Второй и третий параметры ( flex-shrink и flex-basis ) опциональны. По умолчанию установлены следующие параметры:

    Рекомендуется использовать сокращенную запись flex вместо того, чтобы записывать каждое из трех свойств по отдельности.

    Свойство align-self

    Свойство align-self позволяет переопределить выравнивание по умолчанию (либо перезаписать значение, заданное свойством align-items ) для отдельных flex-элементов.

    Свойство align-self принимает те же значения, что и align-items :

    • stretch (значение по умолчанию) — flex-элемент растягивается вдоль поперечной оси (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
    • flex-start — flex-элемент прижимается к началу поперечной оси.
    • flex-end — flex-элемент прижимается к концу поперечной оси.
    • center — flex-элемент центрируется по поперечной оси.
    • baseline — flex-элемент выравнивается по своей базовой линии.

    Свойство order

    По умолчанию flex-элементы выводятся на странице в исходном порядке (т. е. в котором они расположены в HTML). При помощи свойства order можно управлять порядком вывода flex-элементов в контейнере. В качестве значения задается целое число, которое означает вес позиции. Чем меньше число, тем выше позиция.

    На примере ниже показано, каким образом работает свойство order . Элемент «Default» выводится первым, потому что у него вес 0 (и это значение по умолчанию). Следом за ним идет элемент «First» с весом 1 , затем — элемент «Second» с весом 6 , и в конце — элемент «Third» с весом 99 .

    Бонус: вертикальное центрирование

    Flex-элемент легко поддается вертикальному и горизонтальному центрированию через свойство margin: auto (в обычном режиме данная запись дает лишь горизонтальное центрирование). Достаточно применить его к нужному элементу, вот так:

    Свойства, которые игнорируются во Flexbox

    Flex-контейнер не является блочным контейнером, поэтому некоторые свойства, которые были созданы для блочной разметки, не работают с flex-разметкой. В частности:

    • Свойства float и clear не оказывают влияния на flex-элементы и не исключают их из потока.
    • Свойство vertical-align не влияет на flex-элементы.
    • Псевдоэлементы ::first-line и ::first-letter не применяются к flex-контейнеру.
    • «Схлопывание» margin не работает во flex-потоке.

    Завершение

    Модуль Flexible Box однозначно полезен для построения разметки и намного более удобен, чем другие способы создания макета. Рекомендуем поближе познакомиться с flexbox, а также разобраться в том, как он работает, поскольку данный модуль уже набрал популярность и активно используется разработчиками.

    Далее в учебнике: позиционирование элементов в CSS.

    Цукерберг рекомендует:  6 фрагментов кода PHP для взаимодействия с Twitter
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих