Быстрые удары с Гибкой Моделью Коробки

1. Вступление
2. Общие свойства стиля flexbox
3. Стили, используемые на коробке детей
4. Что такое гибкость?
5. Основной пример
6. Центральная сцена: позиционирование в середине
7. Поддержка браузера
8. Резюме

Вступление

Могу поспорить, что вы выполнили свою долю стилей для горизонтального или вертикального расположения на странице. Тем не менее, в CSS пока нет подходящего механизма для этой задачи. Введите CSS 3 Flexible Box Module или Flexbox для краткости.

проект описывает Flexbox как:

[...] блочная модель CSS, оптимизированная для дизайна интерфейса. Он обеспечивает дополнительную систему макетов наряду с уже существующими в CSS. [CSS21] В этой новой блочной модели дочерние элементы блока располагаются либо горизонтально, либо вертикально, и неиспользуемое пространство может быть назначено конкретному дочернему элементу или распределено среди дочерних элементов путем присвоения «flex» дочерним элементам, которые должны расширяться. Вложенность этих блоков (горизонтальная внутри вертикальной или вертикальная внутри горизонтальной) может использоваться для построения макетов в двух измерениях. Эта модель основана на блочной модели на языке пользовательского интерфейса XUL, используемой для пользовательского интерфейса многих приложений на базе Mozilla (таких как Firefox).

Супер. Для разработчика как для Layout Architect ™ это означает:

1. Поплавки? Куда мы идем, нам не нужны поплавки.
2. Макеты, которые были сложными раньше, более разумны.
3. Мы можем создать действительно гибкие макеты, и браузер сделает за нас расчеты.

Flexbox дает нам новое значение для свойства display (значение box ) и восемь новых свойств:

• коробчатого ориентируют
• коробка пакет
• коробка выравнивания
• коробка-флекс
• коробка-флекс-группа
• коробчатого порядковое-группа
• коробчатого направление
• коробчатые линии

Восемь новых свойств? Да, немного ошеломляюще, верно? Хорошо, давайте разберемся с этим.

Общие свойства стиля flexbox

Стили, используемые на коробке

display: box Это новое значение для стиля отображения выбирает этот элемент и его непосредственные дочерние элементы в гибкую блочную модель. Модель flexbox работает только с непосредственными детьми. box-orient Значения: горизонтальный | вертикальный | Наследовать, Как должны быть выровнены дети коробки? Есть два дополнительных значения inline-axis (реальное значение по умолчанию) и block-axis, но они отображаются на горизонтальную и вертикальную соответственно. коробочный пакет Значения: начало | конец | центр | justify Устанавливает выравнивание бокса по оси ориентации бокса. Поэтому, если box-orient является горизонтальным, он выберет, как дочерние элементы box будут выровнены по горизонтали, и наоборот. box-align Значения: начало | конец | центр | базовый уровень | растянуть Собственно братская пачка Устанавливает, как дочерние элементы блока выравниваются в блоке. Если ориентация горизонтальная, он решит выравнивание по вертикали и наоборот.

Стили, используемые на коробке детей

box-flex Значения: 0 | Любое целое число Коэффициент гибкости для этого ребенка. Если бы у ребенка было 1, а у его родного брата - 2, любое дополнительное пространство в родительском ящике было бы использовано вдвое большим количеством брата. По умолчанию 0, что негибко.

Я оставил box-flex-group, box-ordinal-group, box-direction, box-line из вышеперечисленного, потому что, честно говоря, они не нужны для большей части вашей работы с flexbox. Посмотреть ссылки в резюме чтобы увидеть эти свойства на работе.

Примечание о синтаксисе: современные реализации flexbox в WebKit и Gecko требуют использования префиксов поставщиков. В этом уроке я в основном оставил их для ясности. Для деталей, прочитайте поддержка браузера раздел.

Что такое гибкость?

Свойство стиля box-flex определяет, должен ли дочерний элемент flexbox быть гибким или негибким, и помогает определить его коэффициент гибкости относительно его братьев и сестер. Давайте продемонстрируем, что это на самом деле означает. Во-первых, давайте начнем с трех коробок. <div id = "flexbox"> <p> child 1 </ p> <p> child 2 </ p> <p> child 3 </ p> </ div>

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

#flexbox {display: box; бокс-ориентированный: горизонтальный; }

В приведенном выше коде мы просто говорим родителю вести себя в соответствии с этой моделью flexbox и размещать все его дочерние элементы вдоль горизонтальной оси. Не плавает. Ура.

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

По умолчанию дочерние элементы flexbox остаются негибкими. Это может показаться немного странным, но это дает детям шанс выбрать гибкий опыт. Но что, если вы хотите, чтобы дочерние элементы 1 и 2 имели определенную ширину, а дочерние 3 настраивались в зависимости от доступного пространства в родительском элементе? Flexbox на помощь:

#flexbox {display: box; бокс-ориентированный: горизонтальный; } #flexbox> p: nth-child (3) {box-flex: 1; }

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

Обратите внимание, что элемент становится гибким только вдоль оси ориентации блока; в этом случае элемент становится гибким по горизонтали.

Значение для box-flex является относительным. Итак, если мы хотим сделать второго и третьего детей гибкими:

#flexbox {display: box; бокс-ориентированный: горизонтальный; } #flexbox> p: nth-child (2), #flexbox> p: nth-child (3) {box-flex: 1; }

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

Теперь мы могли бы также поиграть с параметром box-flex для детей 1, 2 и 3, равным 1, 2, 3, соответственно, и тогда они будут поглощать дополнительное пространство своего родителя в этом соотношении. Но вместо этого, давайте приведем это в действие.

Основной пример

Проверьте код и результат ниже:

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

На самом деле в игре только два стиля: дисплей: box переводит вещи в режим flexbox, а затем box-flex: 1 для детей заставляет их работать в гибком режиме, занимая все дополнительное пространство. Ориентация по умолчанию - горизонтальная, поэтому на самом деле ориентация по горизонтали: горизонтальная не обязательна, но целесообразно включить ее для ясности и удобства обслуживания. По умолчанию box-align это растяжение, поэтому эти div занимают всю высоту родительского блока. Не так уж и плохо, а? Вы можете увидеть эту технику, используемую для навигации в это гибкое демо Рафаэля Геттера ,

Давайте возьмем это на ступеньку выше.

Центральная сцена: позиционирование в середине

Центрирование чего-либо по горизонтали и вертикали долгое время было проблемой в CSS. Лучшее CSS-решение, которое у нас есть, это position: absolute; слева: 50%; верх: 50%; в паре с отрицательными левыми / верхними полями, равными половине ширины / высоты. И это летит только с явно заданными элементами. Тьфу!

Джеймс Джон Малком написал, что есть способ, основанный на отображении: table-cell; которому по крайней мере 6 лет (Душан Яновский писал об этом в 2004 году), чтобы выровнять по вертикали. Джеймс задокументировал полное горизонтальное и вертикальное решение здесь , Это даже работает без явно заданных размеров элементов.

С flexbox мы можем сделать это проще:

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

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

Так можете ли вы использовать модель гибкой коробки в своей работе сегодня? Пока нет, если вы ориентируетесь на все браузеры. До сих пор мы не видели флексбокс в IE9 или Opera 10.60, но это было в одном из предварительных обзоров платформы IE9, так что, скорее всего, Microsoft добавит его в какой-то момент.

Caniuse.com дает вам представление о текущей поддержке браузера - в основном это Firefox 3+, Safari 3+ и Chrome. Если вы занимаетесь разработкой мобильного веб-набора, flexbox - отличная альтернатива стандартным схемам компоновки.

Но, конечно, все это еще экспериментально, поэтому префиксы вендоров - ваш друг:

/ * мне бы хотелось, чтобы все было так просто: * / display: box; бокс-ориентированный: горизонтальный; коробка-пакет: в центре; выравнивание по окну: по центру; / * но на самом деле вам нужно сделать это: * / display: -webkit-box; -webkit-box-orient: горизонтальный; -webkit-box-pack: центр; -webkit-box-align: центр; дисплей: -моз-коробка; -моз-бокс-ориент: горизонтальный; -моз-бокс-пак: центр; -moz-box-align: центр; дисплей: коробка; бокс-ориентированный: горизонтальный; коробка-пакет: в центре; выравнивание по окну: центр;

Если это звучит как много печатать, Алекс Рассел перебрал все эти опции в несколько полезных вспомогательных классов ,

Резюме

Даже не принимая во внимание другие четыре свойства, здесь есть много возможностей. Чтобы покопаться во flexbox дальше, зацените Изобома изгибает демонстрации и Сообщение Mozilla Hacks о flexbox , W3C Flexbox spec имеет еще больше подробностей, если вы достаточно смелы, чтобы прочитать его плотный текст. Выйдите и спроектируйте несколько макетов. Наслаждайтесь!

Похожие

Комментарии