Flex примеры – Полное руководство по Flexbox — учимся на примерах

Содержание

CSS Flexbox основы c примерами

Использование flexbox

Flexbox применяется не к самим элементам, которые необходимо сгруппировать а к содержащему их контейнеру. Для этого необходимо задать ему css свойство display: flex;.

Примеры:

Без flexbox

С использованием flexbox


.flex__wrp {
    display: flex;
}

Если необходимо чтобы flexbox контейнер был inline элементом (строчным), то следует использовать свойство display: inline-flex;.

flex-direction

Элементам можно задать также направление размещения. Для этого используется свойство flex-direction.

У свойства может быть 4 параметра

row — отображение строкой (используется по умолчанию)
column — отображение столбцом
row-reverse — строка в обратном направлении
column-reverse — столбец в обратном направлении

Примеры:

flex-direction: row;

flex-direction: column;

flex-direction: row-reverse;

flex-direction: column-reverse;

flex-wrap

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

Пример:

Дефолтное значение flex-wrap: nowrap;

Используем flex-wrap: wrap;

justify-content

Для группировки элементов можно использовать свойство justify-content.

У свойства может быть 6 параметров

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

Примеры:

flex-start

flex-end

center

space-between

space-around

space-evenly

align-items

Для выбора расположения элементов по оси отличной от основной используют свойство align-items.

Рассмотрим 3 основных параметра

flex-start — элементы у верхнего края контейнера (используется по умолчанию)
flex-end — элементы у нижнего края контейнера

center — элементы по центру

Примеры:

flex-start

flex-end

center

align-content

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

У свойства может быть 7 параметров

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

Примеры:

stretch

flex-start

flex-end

center

space-between

space-around

space-evenly

order

Для того чтобы «вручную» расположить элементы в нужном порядке используют свойство order. В отличие от всех вышеперечисленных, оно присваивается не контейнеру, а самому элементу. В качестве параметра используется число, соответствующее необходимому порядковому номеру элемента.

Пример:

order

1 order: 2;

2 order: 1;

3 order: 3;

webninja.ru

Примеры использования флексбоксов — Блог Академии — HTML Academy

Это заключительная часть серии статей про флексы от Рейчел Эндрю в Smashing Magazine.

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

Ранее в этой серии

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

Стоит использовать гриды или флексы?

Это всё ещё ключевой вопрос, который мне задают, когда я обучаю раскладке. Думаю, что чем больше люди привыкают к работе с новыми методами раскладки, тем реже они задают себе этот вопрос. Чем больше компонентов вы создаёте, тем лучше вы чувствуете, какой метод раскладки лучше использовать.

Однако, если вы только осваиваете эти технологии, нужно помнить о том, что раскладка и на гридах, и на флексах — это всё CSS. Обозначили ли вы display: grid или display: flex вы чаще используете их схожие свойства, чем отличающиеся.

И гриды, и флексы используют свойства, которые являются частью спецификации Box Alignment — выравнивания блоков, и обе эти раскладки опираются на концепции, описанные в разделе CSS Intrinsic and Extrinsic Sizing — размерности в CSS.

Задавать вопрос о том, нужно ли в вашем интерфейсе использовать гриды или флексы — почти как спрашивать: «Что использовать: размер шрифта или его цвет?»

Вероятно, нужно использовать оба свойства, если потребуется. И никто не собирается преследовать вас, если вы используете неверный вариант.

Таким образом, мы не выбираем между Vue.js и React, Bootstrap или Foundation. Мы используем CSS для создания раскладки и нам нужно использовать те части CSS, которые наиболее целесообразны для этого конкретного блока макета, над которым мы работаем. Рассмотрите каждый компонент и решите, что лучше всего подойдёт для него, какая комбинация технологий лучше сработает.

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

Для чего действительно нужны флексы?

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

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

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

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

See the Pen Smashing Flexbox Series 4: Items sharing space by rachelandrew (@rachelandrew) on CodePen.

Есть также паттерны, где вы хотите видеть переносы строк, однако не хотите строгую сетку. Сравним гриды со значением

repeat(auto-fill) и флексы с переносом строк. Разница между этими двумя методами будет видна сразу же.

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

See the Pen Smashing Flexbox Series 4: Grid example by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: wrapped flex items flex-basis 150px; by rachelandrew (@rachelandrew) on CodePen.

Если flex-basis равен auto и любой из флекс-элементов больше, им также будет дано больше места, так что выравнивание может различаться от строки к строке.

See the Pen Smashing Flexbox Series 4: Wrapped items by rachelandrew (@rachelandrew) on CodePen.

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

Это очень сильно отличается от раскладки на гридах. Пример подобного паттерна — это набор тегов — элементов из одного или двух слов, которые вы хотите красиво отобразить как набор элементов, которые занимают то место, которое им необходимо и при этом не строго определены в жёсткую сетку.

See the Pen Smashing Flexbox Series 4: tags example by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: centered by rachelandrew (@rachelandrew) on CodePen.

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

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

See the Pen Smashing Flexbox Series 4: simple row of form elements by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Smashing Flexbox Series 4: sticky footer card by rachelandrew (@rachelandrew) on CodePen.

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

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

Например, если есть компонент навигации с использованием гридов, я буду создавать достаточное количество полос для всех элементов, так как не хочу, чтобы создавался новый ряд, если будет «слишком много» элементов. С флексами, до тех пор, пока я разрешаю элементам быть гибкими с flex-basis: 0 или auto, элементы позволят новым соседям стать с ними в ряд и оставят для них место.

Когда не стоит использовать флексы?

Мы рассмотрели некоторые причины, по которым думаю, cтоит выбирать флексы вместо раскладки на гридах, поэтому можем посмотреть на некоторые случаи, когда флекс — не лучший вариант. Мы уже посмотрели на пример с флексом против грида, где элементы выровнены по горизонтали и вертикали в отличие от элементов, которые занимают место построчно. И это различие стоит учитывать в первую очередь.

Вот пример грида с двумерной раскладкой. Раскладка одновременно и в строках, и в колонках. Пример на флексах — это одномерная раскладка. Мы позволили перенос флекс-строк, но распределение места на строке ведётся построчно. Каждая строка естественно ведёт себя как новый флекс-контейнер по направлению главной оси.

Следовательно, если компоненту нужна двумерная раскладка, лучше будет использовать гриды вместо флексов. Неважно, большой или маленький у вас компонент. Если запомните из этой статьи только одно, пусть это будет следующее: выкиньте из головы идею о том, что гриды предназначены только для основной раскладки страницы, а флексы — для компонентов. У вас может быть крошечный компонент, которому требуется двумерная раскладка, и структура главной страницы, которой лучше подойдёт одномерная раскладка.

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

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

See the Pen Smashing Flexbox Series 4: wrapped flex items with percentage widths by rachelandrew (@rachelandrew) on CodePen.

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

А вот и всё!

Надеюсь, эта серия про флексы была полезна и продемонстрировала, как некоторое понимание логики выравнивания и размерности флекс-элементов делает жизнь и работу с ними проще. Если у вас остались некоторые нерешённые вопросы или у вас есть паттерн, где непонятно, который метод использовать — пишите .

Это перевод статьи Рейчел Эндрю «Use Cases For Flexbox».

htmlacademy.ru

интерфейсы сайта от начала и до конца

От автора: дни костылей на свойствах float и margin канули в небытие, и в CSS появились новые замечательные свойства, отлично подходящие на эту роль. Такие трюки, как вертикальное выравнивание внутри блока, равномерное распределение места, контроль за сортировкой элементов и прилипающий футер, почти невозможны без flexbox.

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

Гибкие атомарные компоненты

Основная идея интерфейса сайта Tracks заключается в изолированности каждой части дизайна. Эта идея была изложена Brad Frost.

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

Flexbox примеры: шаблоны для сайта от начала и до конца

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Рисунок 1. Карточки отображаются по принципу атомарного веб-дизайна. Можете угадать, какие из них сделаны на flexbox?

Если хотите углубиться в теорию атомарного дизайна, прочитайте статью Brad’s post. Также стоит прочитать его книгу.

Рисунок 2. Изначальный интерфейс Tracks, вобравший все преимущества как flexbox, так и атомарного дизайна.

Интерфейс представляет из себя набор компонентов InVision. Во время первой проверки интерфейса я начал искать подходящие места для flexbox. Я решил применять flexbox на страницах с известными шаблонами типа «сайдбар слева, основной контент справа», которые зачастую выполнены на устаревшем свойстве float.

Одним из положительных моментов в редизайне Tracks был тот, что сайт должен был хорошо работать в Internet Explorer (IE) 10+, Android 4.1+ и iOS 7+. Это была просто замечательная новость, так как все они отлично поддерживают flexbox с соответствующими префиксами. Даже несмотря на стабильную поддержку в наши дни, скажем, для Android 4.1 требуется на всякий случай сделать фолбэк. А как будет выглядеть тот же фолбэк, если свойство вообще не поддерживается браузером? С помощью Modernizr и класса .no-flexbox разработчики могут определить эти самые браузеры и найти стабильные шаблоны (в противном случае можно воспользоваться CSS запросами @supports). К примеру:

<ul>

</ul>

html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target { display: flex; flex-direction: row; } html.no-flexbox ul.flexbox-target li, html.no-js ul.flexbox-target li { display: inline-block; /* Could also use a float-positioned-layout system instead */ }

html.flexbox ul.flexbox-target,

html.no-js ul.flexbox-target {

display: flex;

flex-direction: row;

}

html.no-flexbox ul.flexbox-target li,

html.no-js ul.flexbox-target li {

display: inline-block; /* Could also use a float-positioned-layout system instead */

}

Там, где не совсем ясно, поддерживается ли flexbox, мы будем использовать на всякий случай display: inline-block. Также, чтобы элемент не использовался в JS, добавим к нему класс no-js. Наследование в CSS не нарушится в случае, если flexbox не поддерживается или не загрузился JS. Flexbox прекрасно сосуществует с такими свойствами, как float и display: table, относительным позиционированием. Браузер всегда будет позиционировать flexbox выше остальных свойств, если он поддерживается. А если не поддерживается, будут применены обычные свойства.

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

Инлайновые шаблоны

Компоненты меню оказались крайне полезны в flexbox, не только из-за легкости создания, но и из-за ускорения процесса разработки. Благодаря flexbox инлайновые шаблоны, которые раньше отнимали у разработчиков массу времени, теперь занимают всего лишь минуты. Если вы имели честь применять данный шаблон в версиях IE до 9, вы знаете про это чувство разочарования.

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

Разметка этой панели выглядит так: элемент nav, внутри которого расположена серия ссылок. Пример в HTML:

<header role=»banner»> <nav role=»navigation»> <a href=»pipeline.html»>Back to pipeline</a> <a href=»account.html»>Account</a> <a href=»users.html»>Users</a> <a href=»export.html»>Export</a> </nav> </header>

<a href=»pipeline.html»>Back to pipeline</a>

<a href=»account.html»>Account</a>

<a href=»users.html»>Users</a>

<a href=»export.html»>Export</a>

</nav>

</header>

И соответствующие стили:

nav[role=»navigation»] { display: flex; align-items: center; /* вертикальное центрирование */ } nav[role=»navigation»] a { display: inline-block; /* во избежание проблем с линейным отображением в IE 10 */ } nav[role=»navigation»] a[href=»pipeline.html»] { flex: 1; }

nav[role=»navigation»] {

display: flex;

align-items: center; /* вертикальное центрирование */

}

nav[role=»navigation»] a {

display: inline-block; /* во избежание проблем с линейным отображением в IE 10 */

}

nav[role=»navigation»] a[href=»pipeline.html»] {

flex: 1;

}

Это самый минимум, как разметки, так и стилей. Обратите внимание на значение inline-block, заданное ссылкам. Это значение решает проблему с сортировкой элементов с помощью свойства order в IE10. Также были выявлены проблемы с дочерними элементами контейнера flexbox, если задать им любой padding или margin. Лучше всего постоянно проверять работу свойств во всех браузерах и платформах.

Рисунок 4. В сети часто можно встретить такой шаблон. Шаблон меню хедера с центрированным логотипом с помощью flexbox.

Инлайновый шаблон выше обычно реализуется с помощью несемантической разметки. С появлением flexbox подход немного изменился. Шаблон состоит из ссылок меню по левому краю, центрированного логотипа и дополнительных элементов по правому краю. Разметка выглядит так:

</header>

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

Для выстраивания элементов в ряд до появления flexbox раньше разработчики использовали display: inline-block и даже float: left. Теперь flexbox самый лучший вариант, разработчикам больше не нужно использовать костыли, чтобы создать красивый интерфейс. Стили для этого шаблона немного длиннее, чем для шаблона меню на рисунке 3. Но эти стили легче писать, чем те, о которых мы говорили раньше.

.pipeline-header { display: flex; align-items: center; justify-content: space-between; } .pipeline-header > a { display: inline-block; /* IE 10 не знает свойства order, с помощью этого свойства мы избежим лишних проблем. */ } .pipeline-logo { flex: 1; order: 2; text-align: center; } .pipeline-nav { flex: 1.25; order: 1; } .pipeline-search { flex: 1; order: 3; } a[href=»#menu»] { order: 4; }

.pipeline-header {

display: flex;

align-items: center;

justify-content: space-between;

}

.pipeline-header > a {

display: inline-block; /* IE 10 не знает свойства order, с помощью этого свойства мы избежим лишних проблем. */

}

.pipeline-logo {

flex: 1;

order: 2;

text-align: center;

}

.pipeline-nav {

flex: 1.25;

order: 1;

}

.pipeline-search {

flex: 1;

order: 3;

}

a[href=»#menu»] {

order: 4;

}

В шаблоне на рисунке 4 можно с легкостью изменять последовательность элементов. Если потребуется сместить логотип, просто воспользуйтесь свойством order. Помните, что последовательность элементов в коде очень важна для поисковиков; особенно в случае с разными браузерами. Все браузеры и скрин ридеры используют код для определения последовательности элементов, а не визуальный порядок в CSS. Это нужно при использовании стрелок на клавиатуре.

Рисунок 5. Правильное расположение элементов в разметке (слева) и измененное с помощью flexbox визуальное расположение объектов (справа).

Ниже код для рисунка 5. Разметка никогда не изменяет порядок отображения элементов.

<div>

</div>

А это стили, с помощью которых получается правая часть изображения 5.

.container { display: flex; flex-direction: columns; /* по умолчанию row */ } header { order: 2; } main { order: 3; } footer { order: 1; }

.container {

display: flex;

flex-direction: columns; /* по умолчанию row */

}

header {

order: 2;

}

main {

order: 3;

}

footer {

order: 1;

}

Этот шаблон используется не только для меню, но и для футера.

Рисунок 6. Точно такой же шаблон, только теперь он применен для футера.

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

Инлайновые input’ы

Формы могут быть сущим адом, особенно если они были заточены под шаблон сетки в форошопе. «Инлайновые лейблы» укоренились в веб-дизайне так же, как и легендарная гитара Fender Stratocaster в рок музыке.

Рисунок 7. Еще один прекрасный способ применить flexbox – инлайновые лейблы и инпуты. Но внимательно следите за длиной текста в лейбле, чтобы он не сдвигал инпут на новую строку.

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

Рисунок 8. Необходимо решить, как будет расположен контент. Слева таблица с вертикальным выравниванием посередине. Справа flexbox с выравниванием элементов по центру.

Этот скриншот явно указывает на недостатки flexbox при работе с динамическим или очень длинном контентом. Эффект на правом изображении я называю «центральный сдвиг», контент движется от центра к краям вдоль осей X и Y. Разметка рисунка 8.

<div>

</div>

Чтобы контролировать длинный текст в это случае лучше воспользоваться свойством display: table. В таком случае контент будет просто идти вниз, а не из центра к краям.

.form-group { display: flex; } .form-group label { display: table; vertical-align: middle; } .form-group input { flex: 1; }

.form-group {

display: flex;

}

.form-group label {

display: table;

vertical-align: middle;

}

.form-group input {

flex: 1;

}

Совместное использование display table и flexbox это отличная методика. Я рекомендую вам ее изучить. При использовании обоих свойств постоянно смотрите на появление багов.

Рисунок 9. Инлайновые инпут и кнопка. Одинаковая высота балансирует дизайн.

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

<div>

</div>

.form-group { display: flex; } .form-group input { flex: 1; }

.form-group {

display: flex;

}

.form-group input {

flex: 1;

}

Выпадающее меню

Рисунок 10. С помощью парочки flexbox способов область выпадающего меню слегка подсвечена.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Рисунок 11. Для первичного меню при создании меню использовался исключительно flexbox.

Разметка меню:

<nav> <div> <a href=»export-data.html»>Export</a> <a href=»help.html»>Get Help</a> </div> <div> <a href=»account.html»>Account</a> <a href=»preferences.html»>Preferences</a> <a href=»users.html»>Users</a> <a href=»payment.html»>Payments</a> <a href=»logout.html»>Logout</a> </div> </nav>

<nav>

<div>

<a href=»export-data.html»>Export</a>

</div>

<div>

<a href=»account.html»>Account</a>

<a href=»preferences.html»>Preferences</a>

<a href=»users.html»>Users</a>

<a href=»payment.html»>Payments</a>

<a href=»logout.html»>Logout</a>

</div>

</nav>

CSS стилей очень мало и их легко читать. Все как любят разработчики.

.menu { display: flex; } .menu__options { display: flex; align-items: center; } .menu__items { display: flex; flex-direction: column; }

.menu {

display: flex;

}

.menu__options {

display: flex;

align-items: center;

}

.menu__items {

display: flex;

flex-direction: column;

}

Пара строк кода и получается идеальная верстка. Кроме всего прочего, данное меню автономно, а стили и разметка полностью семантичны. Вот и еще один пример преимущества flexbox перед замысловатым позиционированием и костылями в разметке.

Рисунок 12. Шаблон с медиа объектом. SVG фиксированной ширины расположен слева, а справа примыкает контент.

В этом универсальном шаблоне, известном как «медиа объект», такие элементы как изображения или видео располагаются по одну сторону, а контент прилегает к ним по другую.

<div>

</div>

.medi-obj { display: flex; align-items: flex-start; } .media-obj__body { flex: 1; }

.medi-obj {

display: flex;

align-items: flex-start;

}

.media-obj__body {

flex: 1;

}

Я рекомендую прочитать всем статью Solved by Flexbox Philip Walton на его сайте. Филипп дает полезные советы применения конкретных шаблонов вместе с flexbox, а также он постоянно обновляет все шаблоны в своем репозитории.

С этим шаблоном flexbox работает идеально, однако следите за тем, как прилегающий контент будет вести себя при изменении размера окна браузера. На видео выше видно, как уменьшается расстояние между изображением и тексом, и текст, в конце концов, накладывается поверх изображения. Быть может это глуповатый пример. Кто из здравомыслящих людей будет так сильно сжимать окно браузера? Но перед использованием flexbox очень важно понять, как контент взаимодействует с окружением. Решением будет установить для изображения max-width: 100%.

Календарь.

Было бы очень глупо не вспомнить про календарь. Вы можете задаться вопросом «А почему не воспользоваться таблицей?». Календарь построен по методике date-picker, и я решил разграничить кнопки дней, месяцев и года (каждый недельный ряд находится в отдельном DIV). Такой подход облегчит разметку. Большое спасибо Shane Hudson за объяснение методики. Разметка календаря на самом деле крайне проста.

<div> <header> <button>Left Arrow</button> <span>2015</span> <button>Right Arrow</button> </header> <div> <button>Jan</button> <button>Feb</button> </div> </div>

<div>

<button>Left Arrow</button>

<button>Right Arrow</button>

</header>

<div>

</div>

Код CSS очень короткий, короче просто быть не может. И тем не менее он понятен.

.flex-container { display: flex; } .datepicker__header { justify-content: space-between; } .datepicker__view { align-items: center; justify-content: flex-start; }

.flex-container {

display: flex;

}

.datepicker__header {

justify-content: space-between;

}

.datepicker__view {

align-items: center;

justify-content: flex-start;

}

Рисунок 14.Слева используется justify-content: space-between. Справа justify-content: flex-start.

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

Макет

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

Рисунок 15. Сайдбар слева и основной контент справа – идеальный сценарий для flexbox. Это напомнило мне о технике имитации колонок.

Код также очень маленький, как и код для старых браузеров. Разметка панели администратора построена на нескольких DIV’ах.

<div>

<div>

</div>

.admin-ui__body { display: flex; } .admin-ui__body nav { flex: 30%; } .admin-ui__body main { flex: 70%; }

.admin-ui__body {

display: flex;

}

.admin-ui__body nav {

flex: 30%;

}

.admin-ui__body main {

flex: 70%;

}

Такой подход отлично подходит для случая со старыми браузерами, как на рисунке 14. Шаблон крайне прост. В любой момент можно добавить display: table.

В этом примере CSS 2 свойство display: table-cell это отличный фолбэк под старые браузеры. Элементы ведут себя, как ячейки таблицы. А нам именно такое поведение и нужно, ведь оно полностью имитирует работу flexbox. С помощью display: table-header-group и display: table-footer-group даже можно изменить порядок отображения элементов.

Sticky футер

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

Рисунок 16. Стики футер в правом сайдбаре.

<div> <button>Save Deal</button> <div> <p>…</p> <button>Copy</button> <button>Delete</button> </div> </div>

<div>

<div>

<button>Delete</button>

</div>

.admin-edit { display: flex; flex-direction: column; justify-content: space-between; }

.admin-edit {

display: flex;

flex-direction: column;

justify-content: space-between;

}

Футер отлично работает во всех браузерах вплоть до IE6.

Демо. Flexbox прилипающий футер с фолбэком display table. Работает вплоть до IE6!

Другой частью макета, где я рискнул применить flexbox, оказался основной вид сайта, или как мы его назвали «пайплайн». Каждая карточка имеет определенную ширину. Такой подход позволяет воспользоваться всеми преимуществами flexbox.

Пайплайн.

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

Будьте осторожны

Во время тестов мы обнаружили, что свойство flex в тандеме с padding или margin полностью ломает макет в IE10.

.parent { display: flex; } .parent .child { flex: 1; padding: 20px; /* Ломает макет в IE 10 */ }

.parent {

display: flex;

}

.parent .child {

flex: 1;

padding: 20px; /* Ломает макет в IE 10 */

}

У родителя стоит свойство display: flex. А дочерние элементы со свойствами flex и padding ломают макет. Запрос типа @supports (display: flex) {} должен работать наподобие Modernizr, только тут чистый CSS. Но к сожалению, поддержка данного запроса не велика на сегодняшний день. Вместо него можно использовать:

Используйте класс no-flexbox библиотеки Modernizr

Для центрирования используйте трансформации или display table

Используйте table display

Порядок элементов можно настроить с помощью table-caption, table-header-group и table-footer-group

Для фолбэка основной структуры макета используйте свойство float

Для фолбэка инлайновых шаблонов используйте свойство display: inline или inline-block

Используйте условные комментарии для IE9 и ниже

У Ian Devlin есть отличная статья Объяснение техники стека. В ней он объясняет, как контролировать порядок элементов с помощью table-caption, table-header-group и table-footer-group.

Заключение

Flexbox’ом на сегодня очень даже можно пользоваться. После стольких лет разработки, спецификация, наконец, стала более менее стабильной, позволяя достичь высот, которые раньше были только в мечтах. Также советую посмотреть статью Wes Bos Что такое Flexbox?. Простой ускоренный курс из 20 видеороликов поможет вам овладеть flexbox бесплатно! Первые 13 видео рассказывают об основах; 7 оставшихся роликов это сплошной кодинг. Wes создает все, от меню до полных мобильных версий сайтов. И все на чистом flexbox! После этого курса вы просто не сможете не использовать flexbox в своих проектах.

Автор: Dennis Gaebel Jr

Источник: http://www.smashingmagazine.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

webformyself.com

Примеры использования Flexbox / Habr

Продолжаю публикацию статей Rachel Andrew по особенностям CSS-технологии Flexbox

Предыдущие статьи цикла:

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

Мы подошли к заключительной части моей серии о Flexbox здесь, в Smashing Magazine. В этом посте я собираюсь потратить некоторое время на размышления о том, каковы на самом деле варианты использования Flexbox, учитывая, что теперь у нас есть CSS Grid Layout, дам некоторые предложения о том, что вы можете использовать, когда и как.

Ранее в этой серии

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

Я должна использовать Grid или Flexbox?

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

Однако, если вы только начинаете ухватывать эту мысль, следует помнить, что CSS Grid Layout и Flexbox оба являются CSS. Если вы указали display: grid или display: flex, вы часто используете больше общего, чем различий. И Grid, и Flexbox используют свойства, которые являются частью спецификации Box Alignment; оба опираются на концепции, детализированные в спецификации CSS Intrinsic and Extrinsic Sizing..

Спрашивать, должен ли ваш дизайн использовать Grid или Flexbox подобно вопросу должен ли ваш дизайн использовать размер шрифта или цвет. Вероятно, вы должны использовать оба, если требуется. И никто не будет преследовать вас, если вы воспользуетесь не тем.

Итак, мы не выбираем между Vue.js и React, Bootstrap или Foundation. Мы используем CSS, чтобы выполнить компоновку, и нам нужно использовать частицы CSS, которые имеют наибольший смысл для конкретной части нашего дизайна, над которым мы работаем. Рассмотрите каждый компонент и решите, что лучше для него, или какая комбинация элементов лучше для него.

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

Что такое Flexbox на самом деле?

Спецификация Flexbox описывает метод компоновки так:

«Flex layout внешне похож на block layout. В нем отсутствуют многие более сложные текстовые или документо-ориентированные свойства, которые можно использовать в компоновке блоков, такие как floats и columns. Взамен он получил простые и мощные инструменты для распределения пространства и выравнивания контента способом, в котором давно нуждались веб-приложения и сложные веб-страницы.”

Я думаю, что ключевая фраза здесь “распределение пространства и выравнивание контента”. Flexbox — это все о том, чтобы взять кучу элементов (которые имеют разные размеры) и поместить их в контейнер (который сам может быть переменного размера). Flexbox — это мягкость. Он пытается создать наилучший макет для наших элементов, давая большим элементам больше пространства, а меньшим элементам меньше пространства, тем самым сохраняя читаемость контента.

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

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

Существуют также шаблоны, в которых вы хотите иметь строки с переносом, однако вам не нужна строгая сетка. Если мы возьмем оригинальный пример Grid против Flexbox, где мы используем в сетке синтаксис repeat auto-fill, а затем flex-контейнер с переносом строк, то сразу увидим разницу между этими двумя методами.

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

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

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

Это очень яркий пример того, где мы хотели бы использовать Flexbox над Grid Layout. Если мы хотим, чтобы элементы были обернуты, но занимали пространство, в котором они нуждались, по строкам. Это очень отличается от сетки. Шаблоны, подобные этому, могут представлять собой набор тегов (один или два слова, которые вы хотите хорошо отображать в виде набора элементов), занимающих необходимое пространство, а не жестко вставленных в строгую сетку.

В настоящее время Flexbox также является лучшим способом выполнения вертикального и горизонтального центрирования элемента внутри контейнера.

В будущем (если будет поддержка браузерами свойств Box Alignment вне гибкого макета), мы можем сделать это, не добавляя display: flex в контейнер. На данный момент, однако, все, что вам нужно сделать, это дополнительная строка CSS, что не является проблемой.

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

Вы также можете выбрать Flexbox в сценарии, где контент нужно привести к низу контейнера, не давая ему всплывать. В примере, расположенном ниже, я делаю контейнер flex-контейнером, отображая содержимое в виде столбца, а затем позволяю середине расти, выталкивая footer вниз компонента.

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

Однако я думаю, что Flexbox будет лучшим в ситуации, когда потребуется добавлять дополнительные элементы, которые я не ожидала в своем дизайне. Например, если у меня есть компонент навигации, использующий Grid, я бы создала достаточно треков для всех элементов, так как я не хотела бы, чтобы создавалась новая строка, если бы у меня было “слишком много” элементов. С flexbox, достаточно длинным, я бы разрешил элементам быть гибкими с flex-basis 0 (или auto), тогда бы элементы сами пускали нового компаньона в строку, освобождая ему место.

Когда не следует использовать Flexbox?

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

Пример сетки имеет двумерную компоновку. Компоновка по строкам и столбцам одновременно.

Пример Flexbox это одномерная компоновка. Мы упаковали flex-строки, но размещение в пространстве происходит построчно. Каждая строка, по сути, выступает в качестве нового flex-контейнера во Flex-направлении.

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

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

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

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

И так, сворачиваемся!

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

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

habr.com

Работа с Flexbox в гифках / Цифровые Экосистемы corporate blog / Habr

Flexbox так и напрашивается на то, чтобы создавать по нему визуальные шпаргалки. Сегодня мы предлагаем вам перевод статьи Скотта Домеса «Как работает Flexbox – в больших, ярких анимированных гифках», своего рода наглядное пособие.

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

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

Идея, в принципе, неплохая. Но давайте посмотрим, как это реализуется на практике. В этой статье мы рассмотрим 5 основных свойств Flexbox. Мы опишем, для чего они нужны, как вы можете их использовать, и к каким результатам они в итоге приводят.

Свойство № 1: Display: Flex

Вот наша интернет-страница в качестве примера:

У вас есть четыре разноцветных блока различных размеров в сером контейнере. На данный момент для каждого блока по умолчанию определено display: block. Каждый квадрат таким образом занимает всю ширину своей линии.

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

#container {
  display: flex;
}

На первый взгляд изменения незначительны — ваши блоки отображаются теперь в инлайновом виде, только и всего. Между делом вы сделали большой шаг. Вы создали для своих блоков так называемый flex-контекст.

Теперь вы можете размещать их в этом контексте — это намного проще, чем при работе с традиционным CSS.

Свойство № 2: Flex Direction

У flexbox-контейнера есть две оси: главная ось и перпендикулярная ось, которые по умолчанию выглядят следующим образом:

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

#container {
  display: flex;
  flex-direction: column;
}

Следует подчеркнуть: flex-direction: column не располагает квадраты на перпендикулярной оси вместо главной оси. Это свойство меняет направление самой главной оси из горизонтального в вертикальное.

У flex-direction есть и другие значения: row-reverse и column-reverse.

Свойство № 3: Justify Content

Justify Content задаёт выравнивание элементов по главной оси.

Здесь различие главной и перпендикулярной осей следует рассмотреть подробнее. Сначала вернемся к flex-direction: row.

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

У Justify Content есть пять значений:

Flex-start
Flex-end
Center
Space-between
Space-around

Space-around и space-between наименее интуитивны. Space-between выравнивает элементы так, чтобы они располагались на одинаковом расстоянии относительно друг друга, но не относительно контейнера.

Space-around задает одинаковый отступ вокруг элемента со всех сторон. Это означает, что пространство между крайними квадратами и контейнером вдвое меньше, чем пространство между двумя квадратами (все отступы имеют одинаковую величину и не накладываются друг на друга, соответственно, промежуток между квадратами получается двойной).

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

Свойство № 4: Align Items

Если вы освоили justify-content, align-items не вызовет у вас затруднений.

В то время как justify-content применяется для главной оси, align-items задаёт выравнивание элементов по перпендикулярной оси.

Зададим для flex-direction изначальное значение row, чтобы оси выглядели следующим образом.

Затем перейдем к командам align-items.

flex-start
flex-end
center
stretch
baseline

Первые три действуют так же, как и для justify-content, так что с ними все просто.

Следующие две несколько отличаются.

При заданном значении stretch элементы занимают всё свободное пространство по перпендикулярной оси. Если задано baseline, основания тегов абзаца выравниваются.

(Для align-items важно следующее: при значении stretch надо задать высоту квадратов автоматически, иначе она будет переопределять ширину.)

Что касается baseline, имейте в виду: если вы убираете теги абзаца, то будут выравниваться основания квадратов, как в примере:

Чтобы лучше продемонстрировать функционирование главной и перпендикулярной осей, скомбинируем justify-content и align-items и посмотрим, как значение center влияет на каждую из команд flex-direction:

При row квадраты выравниваются вдоль горизонтальной главной оси. При column они располагаются вдоль вертикальной главной оси.

Даже если квадраты центрированы и вертикально и горизонтально в обоих случаях, эти две команды не взаимозаменяемы!

Свойство № 5: Align Self

Align Self позволяет вручную управлять выравниванием одного конкретного элемента.

Это свойство аннулирует значения align-items для выбранного квадрата. Все свойства — те же, но по умолчанию выставляется auto, при котором значения аналогичны align-items контейнера.

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.

Давайте посмотрим, как это будет выглядеть. Вы применяете align-self к двум квадратам, а для остальных применяете align-items: center и flex-direction: row.

Заключение

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

Спасибо за внимание!

habr.com

11 вещей которые я узнал, читая спецификацию flexbox / Habr

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float’ов и clearfix’ов.

Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?

В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?

Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec

Вот хорошие отрывки.

1. Margin обладает особыми силами

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

… тебе следует дать названию flex: 1, чтобы прижать остальные элементы к другому концу строки.

Вот почему flexbox — Очень Хорошая Вещь. Простые вещи такие простые.

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

Отличные новости! Вместо этого, ты можешь сказать прямо: «прижми этот элемент вправо», определив margin-left: auto на нужном элементе. Думай об этом как о float: right.

Например, если элемент слева является изображением:

Мне не нужно применять flex к изображению, мне не нужно применять space-between к flex-контейнеру, я просто установлю margin-left: auto на кнопке «Войти» («Sign in»):

.header {
  display: flex;
}
.header .logo {
  /* nothing needed! */
}
.header .sign-in {
  margin-left: auto;
}

Тебе может показаться это некоторым хаком, но нет, это прямо там в обзоре спецификации как способ прижать flex-элемент в конец flexbox’а. У способа даже есть своя глава: «Выравнивание с авто margin’ами».

О, мне также следует здесь упомянуть, что я предполагаю flex-direction: row везде в этом блог-посте, но все применимо также и к row-reverse или column или column-reverse.

2. min-width имеет значение

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

Может, пример.

Скажем, у тебя есть часть DOM, которая отображает книгу на продажу и кнопку чтобы ее купить.

Любопытная бабочка

Спойлер: бабочка умрет в конце.

Ты разместил все с помощью flexbox и все хорошо.

.book {
  display: flex;
}
.book .description {
  font-size: 30px;
}
.book .buy {
  margin-left: auto;
  width: 80px;
  text-align: center;
  align-self: center;
}

(Поскольку ты хочешь кнопку «Купить» справа — даже для очень коротких названий — ты, будучи умным, указал margin-left: auto)

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

И потом получаешь неприятный сюрприз. Совсем не хорошего рода.

Некий дурень, много о себе возомнивший, написал книгу с длинным словом в названии.

Все сломано!

Если красная граница обозначает ширину смартфона, и ты скрываешь переполнение (overflow: hidden), ты только что потерял свою кнопку «Купить». Твой коэффициент конверсии — как и эго бедного автора — будет страдать.

(Примечание: к счастью, там где я работаю, есть хорошая QA команда, которая наполнила нашу базу данных разнородным текстом, наподобие такого. В частности, именно эта проблема побудила меня прочитать спецификацию.)

Оказывается, такое поведение происходит из-за того, что min-width элемента описания изначально установлена в auto, что в данном случае равняется ширине слова Electroencephalographically (электроэнцефалографически). Flex-элементу буквально не разрешается быть уже чем это слово.

Решение? Переопределить эту проблемную минимальную ширину min-width: auto установив min-width: 0, указывая flexbox’у, что этот элемент может быть уже, чем содержимое внутри него.

Теперь за управление текстом внутри элемента отвечаешь ты. Я предлагаю перенести слово. Таким образом, твой CSS будет выглядеть так:

.book {
  display: flex;
}
.book .description {
  font-size: 30px;
  min-width: 0;
  word-wrap: break-word;
}
.book .buy {
  margin-left: auto;
  width: 80px;
  text-align: center;
  align-self: center;
}

Результат будет таким:

Опять же, min-width: 0 не какой-то хак для обхода нелепости, это предлагаемое поведение прямо в спецификации.

В следующем разделе, я вернусь к тому, что кнопка «Купить» совсем не 80 пикселей по ширине, как я довольно ясно ей сказал.

3. Авторы flexbox обладают хрустальным шаром

Как вы возможно знаете, свойство flex является краткой записью flex-grow, flex-shrink и flex-basis.

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

Что я не знал до сей поры, это то, что, в общем случае, я хочу одну из трех комбинаций:

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

Надеюсь, что ты пока не на максимальном изумлении — сейчас станет еще поразительнее.

Видишь ли, Бригада Flexbox’а (мне нравится думать, что команда flexbox’а носит кожаные куртки с этой надписью сзади — доступны мужские и женские размеры). Где там было это предложение? Ах да, Бригада Flexbox’а знала, что я хочу эти три комбинации свойств в большинстве случаев. Поэтому они дали им ключевые слова специально для меня.

Первый случай — это значение initial так что ключевое слово не нужно. Для второго случая используется flex: auto, и flex: none замечательно простое решение чтобы элемент не тянулся совсем.

Кто бы мог подуть! (Who woulda thunk it — игра слов, прим. переводчика)

Это как если бы было box-shadow: garish, что по умолчанию равнялось 2px 2px 4px hotpink потому что считалось «полезным значением по умолчанию».

Вернемся к невероятно уродливому книжному примеру. Чтобы сделать ту кнопку «Купить» стабильно широкой для попадания пальцем…

… мне всего лишь надо задать на ней flex: none:

.book {
  display: flex;
}
.book .description {
  font-size: 30px;
  min-width: 0;
  word-wrap: break-word;
}
.book .buy {
  margin-left: auto;
  flex: none;
  width: 80px;
  text-align: center;
  align-self: center;
}

(Да, я мог бы указать flex: 0 0 80px; и сэкономить строку CSS. Но есть что-то особенное в том, как ясно flex: none демонстрирует намерение кода. Это хорошо для Будущего Дэвида который забудет как это все работает.)

4. Есть такая вещь inline-flex

По правде говоря, я узнал, что есть такая вещь как display: inline-flex несколько месяцев назад. И то, что она создаст инлайновый flex-контейнер, вместо блочного.

Но по моей оценке, 28% людей еще не знали этого, так что… теперь знайте, нижние 28%.

5. vertical-align не влияет на flex-элемент

Возможно это то, что я знал наполовину, но я уверен, что в какой-то момент, когда пытался задать правильное выравнивание, я мог испробовать vertical-align: middle и пожать плечами, когда это не сработало.

Теперь я знаю наверняка, прямо из спецификации, что «вертикальное выравнивание не влияет на flex-элемент» (так же как и float, замечу).

6. Не используй margin или padding в %

Это не просто уровня «лучшая практика», это уровня «совет-от-бабушки», так что просто делай что говорят и не задавай вопросов.

«Авторам следует полностью избегать использования процентов в padding’ах или margin’ах на flex-элементах» — с любовью, спецификация flexbox.

За этим следует моя самая любимая цитата из всех, когда-либо существовавших, спецификаций:

Заметка: это разночтение отстой, но оно в точности отражает текущее состояние мира (нет консенсуса среди реализаций, и нет консенсуса внутри CSSWG)…

Осторожно! Бомбардировка честностью продолжается.

7. Margin’ы соседних элементов не схлопываются

Возможно, ты уже знаешь, что margin’ы иногда объединяются вместе. Ты также можешь знать, что margin’ы не объединяются вместе в некоторых других случаях.

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

8. z-index работает даже если position: static

Я не уверен, что мне есть дело до этого. Но я чувствую, что в один день, может быть, это пригодится. Это в точности та же причина, по которой я держу бутылку лимонного сока в холодильнике.

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

9. Flex-basis тонкое и важное свойство

Когда твои требования перерастут ключевые слова initial, auto и none, все станет немного сложнее, и теперь, когда я понял flex-basis, забавно, знаешь, я не могу придумать как закончить это предложение. Оставь комментарий, если у тебя есть идеи.

Если у тебя есть три flex-элемента с flex-значениями 3, 3, 4, тогда они гарантированно займут 30%, 30% и 40% доступного пространства, независимо от их содержимого, если их flex-basis равен 0. И только если он равен нулю.

Тем не менее, если ты хочешь чтобы flex вел себя в более дружественной, предсказуемой манере, используй flex-basis: auto. В этом случае flexbox примет твои flex-значения во внимание, но также учтет и другие факторы, подумает немного, и подберет ширины, подходящие по его мнению тебе.

Взгляни на эту четкую диаграмму из спецификации:

Я уверен, что это упомянуто по меньшей мере в одном из блог-постов про flex, которые я читал, но по какой-то причине, не проникся пока не увидел эту картинку в спецификации (schmick pick in the spec)(тройная рифма если ты из Новой Зеландии).

10. align-items: baseline

Когда я хотел выравнять flex-элементы по вертикали, я всегда использовал align-items: center. Но также как с vertical-align, у тебя есть возможность установить значение в baseline, что может быть более подходящим если у твоих элементов различный размер шрифта, а ты хочешь выравнять их базу.

Возможно очевидно, align-self: baseline тоже работает.

11. Я довольно глуп

Сколько бы раз я не читал следующий параграф, я остался неспособным его понять…

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

Оригинальный вариант

The content size is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite.

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

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

Леди и Джентльмены, мы начали наш спуск в чепуху, что значит пришло время подвести итоги (или перестань читать, если ты здесь для изучения нового).

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

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

Я лучше отношусь к этому коду теперь, зная что я делаю это должным образом.

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

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

Теперь, если позволите, мне надо идти и прочитать все остальные CSS спецификации.

P.S. Я крайне рекомендую прочитать следующий список всех flexbox багов по браузерам:
github.com/philipwalton/flexbugs

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

Оригинальный пост здесь: hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b

habr.com

CSS-flexbox. Наглядное пособие и примеры

CSS3-flexbox — это специальная технология, которая была введена в последней версии каскадных стилей, позволяющая задавать гибкую сетку расположения блоков внутри некоторого контейнера-родителя.

Какие возможности дает данная сетка:

возможность управлять колончатой структурой основного каркаса html-вёрстки;
управлять ориентацией расположения html-тэгов подобно табличной верстке;
управлять порядком расположения;
и многие другие.

Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:

Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:

ИЕ: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Хром: 29.0, 21.0 -webkit-
Сафари: 6.1 -webkit-
Опера: 12.1 -webkit-
Сафари (под Мак): 7.0 -webkit-
Опера-Мини: 8
Анройд-Браузер: 4.4, 4.1 -webkit-
Хром (под Андройд): 44

Вернуться к навигации

1.1. Свойство display: flex

CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:

display: flex; — для блокового отображения;
display: inline-flex; — для инлайнового отображения.

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

Вернуться к навигации

1.2. Выравниваем горизонтально justify-content

Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.

justify-content
Значения:
`flex-start`	Выравнивает по левой кромке. Дефолтное значение
`flex-end`	Выравнивает по правой кромке.
`center`	Выравнивает по середине.
`space-between`	По всей ширине родителя на равновеличинные отрезки. Стоит отметить, что первый элемент приживается к левому краю без пустот, но с учетом паддингов, а последний также, но к правому краю. Все остальные блочные элементы размещаются между первым и последним через одинаковые отрезки пустоты.
`space-around`	По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина.
`initial`	Задание дефолтного значения.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-podlogka
{
	height: 120px;
	background-color: #ddd;
	margin: 0px;
	padding: 10px;
		
	display: flex;
	display: -webkit-flex;
	
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}

.b-podlogka
{	
	justify-content: flex-end;
}

.b-podlogka
{	
	justify-content: center;
}

.b-podlogka
{	
	justify-content: space-between;
}

.b-podlogka
{	
	justify-content: space-around;
}

Вернуться к навигации

1.3. Вертикальное выравнивание align-items

Свойство используется для того, чтобы выровнять вертикально дочерние объекты внутри родительского flexbox-контейнера. Следует отметить, что под это выравнивание также подпадают и анонимные флекс-итемы. Данное правило не наследуется. Выравниваются только блоки первой строки.

align-items
Значения:
`stretch`	Флексбокс-блоки, если не зафиксирована высота, вытягиваются на всю высоту родительского контейнера. Является первоначальным (базовым) параметром.
`flex-start`	Предназначено для выравнивания флексбокс-итемов по верхней кромке контейнера-родителя с учетом внутренних отступов (`padding`).
`flex-end`	Предназначено для выравнивания флексбокс-итемов по нижней кромке контейнера-родителя с учетом внутренних отступов (`padding`).
`center`	Выравнивает дочерние флекс-блоки внутри флекс-контейнера по средней линии самого высокого блока.
`baseline`	Выравнивает дочерние флекс-блоки внутри родительского относительно средней линии текста в этих блоках.
`initial`	Будет установлено в первоначальное значение.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-podlogka
{
	align-items: stretch;
	-webkit-align-items: stretch;
}

Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto;.

.b-podlogka
{	
	align-items: flex-start;
}

.b-podlogka
{
	align-items: flex-end;
}

.b-podlogka
{	
	align-items: center;
}

.b-podlogka
{
	align-items: baseline;
}

Вернуться к навигации

1.4. Ориентация основной оси flex-direction

Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту ?) и по горизонтали (в строку, по дефолту ?).

flex-direction
Значения:
`row`	Ориентация ? или ?, опираясь на направленность текста для разных языковых локаций (например, арабские и русские и так далее). Первоначальная величина.
`row-reverse`	Ориентация ? или ?, опираясь на направленность текста для разных языковых локаций (например, арабские и русские и так далее).
`column`	Ориентация ? (одноколоночное расположение).
`column-reverse`	Ориентация ? (одноколоночное расположение).
`initial`	Будет переведено в первоначальную величину.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-podlogka
{
	flex-direction: row;
	-webkit-flex-direction: row;
}

.b-podlogka
{
	flex-direction: row-reverse;
}

.b-podlogka
{
	flex-direction: column;
}

.b-podlogka
{
	flex-direction: column-reverse;
}

Вернуться к навигации

1.5. Размещение в несколько строк flex-wrap

Отвечает за размещение дочерних flex-блоков в одну или несколько строк.

flex-wrap
Значения:
`nowrap`	В исходном состоянии все дочерние итемы располагаются в одну строчку (? или ? в зависимости от выбранной ориентации текста).
`wrap`	При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя (? или ? в зависимости от выбранной ориентации текста).
`wrap-reverse`	При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя, имея при этом реверсивный порядок чередования.
`initial`	Будет установлено в первоначальное значение.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-podlogka
{
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.b-podlogka
{
	flex-wrap: wrap-reverse;
}

Вернуться к навигации

1.6. Направленность и многострочность одним правилом flex-flow

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

flex-flow
Значения:
ориентация	Задает ориентацию (направленность) основной оси. По дефолту равно `row`.
многострочность	Задает расположение в несколько строк по вертикально ориентированной оси. По дефолту равно `nowrap` (то есть в одну строку).
`initial`	Будет установлено в первоначальное значение.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-podlogka
{
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
}

Вернуться к навигации

1.7. Выравниваем вертикально во всех строках align-content

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

align-content
Значения:
`stretch`	Растягивание элементов на всю высоту родительского контейнера (у флекс-блоков не должна быть зафиксирована высота).
`flex-start`	Выравнивает поверху.
`flex-end`	Выравнивает понизу.
`center`	Выравнивает вертикально по центру.
`space-between`	Вертикально выравнивает внутриконтейнерные элементы таким образом, что первая линия блоков прижимается кверху, последняя — книзу, а пространство между остальными распределяется равномерно.
`space-around`	Вертикально выравнивает внутриконтейнерные элементы таким образом, что расстояние в начале, в конце и между ними равны между собой.
`initial`	Будет установлено в первоначальное значение.
`inherit`	Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Пример кода

.b-podlogka
{
	height: 120px;	
	flex-flow: row wrap;
	align-content: stretch;
}

.b-podlogka
{
	align-content: flex-start;
}

.b-podlogka
{
	align-content: flex-end;
}

.b-podlogka
{
	align-content: center;
}

.b-podlogka
{
	align-content: space-between;
}

.b-podlogka
{
	align-content: space-around;
}

Кроме правил, используемых в отношении родителя-контейнера, во флексбокс-сетке существует несколько правил, применяемых к дочерним элементам. Рассмотрим их подробнее.

Вернуться к навигации

2.1. Упорядочивание блоков order

ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.

order
Значения:
число	Положительное или отрицательное число, означающее место расположения (порядок расположения) в очереди всех блоков. По дефолту равно `0`, то есть элементы идут строго друг за другом в порядке расположения в html-коде.
`initial`	Переводит в дефолтное состояние.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-div1
{
	-webkit-order: 1;
	order: 1;
}

.b-div5
{
	-webkit-order: -1;
	order: -1;
}

Вернуться к навигации

2.2. Базис флекс-блока flex-basis

CSS-правило, предназначенное для фиксации ширины дочернего флекс-блока внутри родительского контейнера. Задается для срабатывания двух ниже лежащих параметров. Является не наследуемым правилом.

flex-basis
Значения:
`auto`	Такая опция сообщает css-интерпретатору, чтобы он устанавливал визуальную ширину блока при рендеринге браузером в соответствии с контентом внутри блока. Является дефолтной величиной.
число	Указывается в виде натурального числа в разных единицах измерения.
`initial`	Задает дефолтную величину.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Пример кода

.b-div3
{
	flex-basis: 70px;
	-webkit-flex-basis: 70px;
}

Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.

Вернуться к навигации

2.3. Пропорциональное увеличение ширины блока flex-grow

Свойство предназначено для задания цифрового показателя, который позволяет увеличить флекс-блок пропорционально его ширине. Чем больше значение, тему шире блок. Для срабатывания необходимо, чтобы была задана ширина элемента или задан базис (выше пункт 2.2). Является не наследуемым правилом.

flex-grow
Значения:
число	Указывается в виде натурального числа или десятичной дроби, которые должны быть больше нуля. По дефолту равно 0.
`initial`	Будет установлено в исходное значение.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-div3
{
	-webkit-flex-grow: 1; 
	flex-grow: 1;
}

Пример отображения

Вернуться к навигации

2.4. Пропорциональное уменьшение ширины блока flex-shrink

Свойство предназначено для задания цифрового показателя, который позволяет сузить флекс-блок пропорционально его ширине. Чем больше значение, тему уже блок. Для срабатывания необходимо, чтобы была задана ширина элемента или задан базис (выше пункт 2.2). Является не наследуемым правилом.

flex-shrink
Значения:
число	Указывается в виде натурального числа или десятичной дроби, которые должны быть больше нуля. По дефолту равно 1.
`initial`	Будет установлено в исходное значение.
`inherit`	Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-div3
{
	-webkit-flex-shrink: 0; 
	flex-shrink: 0;
}

Пример отображения

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

Вернуться к навигации

2.5. Запись трех предыдущих одной строкой flex

Свойство представляет собой объединение трех выше описанных свойств (в пунктах 2.2, 2.3 и 2.4), то есть по сути является их сокращенной формой их записи. Используется с целью оптимизации css-кода.

Консорциум W3C советует всем разработчикам использовать именно сокращенную форму, так как большинство браузеров хорошо интерпретирует ее при рендеринге. Рассматриваемое правило не наследуется.

flex
Значения:
растяжение	Данный показатель отвечает за увеличение хтмл-итема по ширине по отношению к другим итемам внутри родителя, опираясь на «базис».
сужение	Данный показатель отвечает за уменьшение ширины хтмл-итема по отношению к другим итемам внутри родителя, опираясь также на «базис».
базис	Установка данного параметра фиксирует ширину флекс-блока. Единицы измерения: пиксели, проценты и так далее.
`auto`	Значение формируется автоматически на основании принятого стандарта. Примерно тоже самое, что если задать `flex: 1 1 auto;`.
`none`	Отмена правила.
`initial`	Будет установлено в исходное значение.
`inherit`	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

.b-podlogka
{	
	display: flex;
	display: -webkit-flex;
}

.b-div3
{		
	-webkit-flex: 2 2 88px; 
	-ms-flex: 2 2 88px; 
	flex: 2 2 88px;
}

Пример отображения

Вернуться к навигации

2.6. Выравнивание дочерних блоков align-self

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

align-self
Значения:
`auto`	При данном параметре выравнивание у текущего итема наследуется от родителя, из примененного к нему правила `align-items`. Является исходной величиной.
`flex-start`	Предназначено для выравнивания флексбокс-итема по верхней кромке контейнера-родителя, учитывая внутренние отступы (`padding`).
`flex-end`	Предназначено для выравнивания флексбокс-итема по нижней кромке контейнера-родителя, учитывая внутренние отступы (`padding`).
`center`	Выравнивает дочерний блок внутри флекс-контейнера по средней линии самого высокого блока.
`baseline`	Итем внутри родительского выравнивается относительно базисной линии текстового содержимого в других итемах.
`stretch`	Дочерний элемент, если не зафиксирована его высота, вытягиваются на всю высоту родительского контейнера с учетом его внутренних отступов.
`initial`	Присваивает исходную величину.
`inherit`	Унаследовать правило от родителя.

Пример кода

.b-podlogka
{	
	align-items: stretch;
}

.b-div1
{		
	align-self: flex-start;
}

.b-div1
{		
	align-self: flex-end;
}

.b-div1
{		
	align-self: center;
}

.b-podlogka
{	
	align-items: center;
}
.b-div1
{		
	align-self: baseline;
}

.b-div1
{		
	align-self: stretch;
}

Приведем пример шаблона верстки каркаса страницы на flexbox:

Понравилась статья? — Ставь лайк!

paratapok.ru

Flex примеры – Полное руководство по Flexbox — учимся на примерах

CSS Flexbox основы c примерами

Использование flexbox

Примеры:

flex-direction

Примеры:

flex-wrap

Пример:

justify-content

Примеры:

align-items

Примеры:

align-content

Примеры:

order

Пример:

Примеры использования флексбоксов — Блог Академии — HTML Academy

Ранее в этой серии

Стоит использовать гриды или флексы?

Для чего действительно нужны флексы?

Когда не стоит использовать флексы?

А вот и всё!

интерфейсы сайта от начала и до конца

Гибкие атомарные компоненты

Инлайновые шаблоны

Инлайновые input’ы

Выпадающее меню

Макет

Sticky футер

Будьте осторожны

Заключение

PSD to HTML

Примеры использования Flexbox / Habr

Ранее в этой серии

Я должна использовать Grid или Flexbox?

Что такое Flexbox на самом деле?

Когда не следует использовать Flexbox?

И так, сворачиваемся!

Работа с Flexbox в гифках / Цифровые Экосистемы corporate blog / Habr

Свойство № 1: Display: Flex

Свойство № 2: Flex Direction

Свойство № 3: Justify Content

Свойство № 4: Align Items

Свойство № 5: Align Self

Заключение

11 вещей которые я узнал, читая спецификацию flexbox / Habr

1. Margin обладает особыми силами

2. min-width имеет значение

3. Авторы flexbox обладают хрустальным шаром

4. Есть такая вещь inline-flex

5. vertical-align не влияет на flex-элемент

6. Не используй margin или padding в %

7. Margin’ы соседних элементов не схлопываются

8. z-index работает даже если position: static

9. Flex-basis тонкое и важное свойство

10. align-items: baseline

11. Я довольно глуп

CSS-flexbox. Наглядное пособие и примеры

1.1. Свойство display: flex

1.2. Выравниваем горизонтально justify-content

1.3. Вертикальное выравнивание align-items

1.4. Ориентация основной оси flex-direction

1.5. Размещение в несколько строк flex-wrap

1.6. Направленность и многострочность одним правилом flex-flow

1.7. Выравниваем вертикально во всех строках align-content

2.1. Упорядочивание блоков order

2.2. Базис флекс-блока flex-basis

2.3. Пропорциональное увеличение ширины блока flex-grow

2.4. Пропорциональное уменьшение ширины блока flex-shrink

2.5. Запись трех предыдущих одной строкой flex

2.6. Выравнивание дочерних блоков align-self

Добавить комментарий Отменить ответ

Рубрики

Рубрики