Статьи

Введение в модуль CSS Flexbox

Май 1, 2019

У CSS, несмотря на его относительно низкий воспринимаемый потолок навыков, всегда есть убийственная особенность в рукаве. Помните, как медиа-запросы сделали возможным адаптивные макеты и произвели революцию в разработке интерфейса? Что ж, сегодня мы поговорим о новом режиме макета, который называется flexbox — новый в CSS3. Я уверен, что ты рвешься идти! Давайте начнем после прыжка.

Последующие изменения в методах и программном обеспечении

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

Поддержка CSS Flexbox

В настоящее время спецификация CSS Flexbox является рабочим проектом, и все изменится ! Примеры, которые рассматриваются в этом руководстве, могут не работать в будущем, так как браузеры изменяют свою реализацию flexbox в соответствии со спецификацией. Цель этого учебного пособия — дать вам базовое понимание CSS flexbox и продемонстрировать, как использовать его на своих веб-страницах.

Обратите внимание, что в этом руководстве для краткости будут использованы примеры с префиксами webkit / non-vendor. Посмотрите на caniuse.com список браузеров, которые поддерживают модуль flexbox, и, соответственно, укажите необходимые префиксы в своих проектах.

Фон на режимах макета

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

Иногда, когда элемент не является блоком, он может быть встроенным . Встроенные элементы уровня включают в себя тег привязки, тег ввода и сильный тег. Инструменты разработчика в Chrome фактически позволяют вам просматривать « вычисляемый стиль » элемента, который является отличным способом определить, какие свойства и значения CSS были применены к элементам, которые не были явно установлены разработчиком.

Вот краткий совет для доступа к вычисляемому стилю элемента с помощью метода JavaScript window.getComputedStyle .

1
2
var elem = document.querySelector(‘h1#someId’);
window.getComputedStyle(elem).display;

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

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

Как вы можете использовать Flexbox?

Чтобы заставить элемент использовать макет flexbox, мы добавляем значение flexbox в свойство display.

1
2
3
#container {
    display: flexbox;
}

По умолчанию flexbox является элементом уровня блока; мы можем определить элемент встроенного уровня следующим образом:

1
2
3
#container {
    display: inline-flexbox;
}

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

1
2
3
4
5
<ul>
  <li>An item</li>
  <li>Another item</li>
  <li>The last item</li>
</ul>
1
2
3
4
5
6
7
ul {
    /* Old Syntax */
    display: -webkit-box;
 
    /* New Syntax */
    display: -webkit-flexbox;
}

Вы заметите, что элементы элемента списка теперь текут горизонтально, подобно тому, как они могли бы отображаться, если бы мы использовали float: left . Элементы списка теперь могут называться элементами flexbox.

Примечание: прямой потомок flexbox, который абсолютно позиционирован, например, с использованием position: absolute , не может быть элементом flexbox, так как он нарушает обычный поток.

Очень простой пример

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

Изучение flex-direction

Мы можем применить свойство flex-direction и указать направление, в котором мы хотим разместить наши элементы flexbox. Свойство принимает в качестве значений row, row-reverse, column & column-reverse . Значением по умолчанию является row .

Используя разметку, аналогичную приведенной выше, мы можем добавить еще одно свойство CSS: пара значений: ( flex-direction: column )

1
2
3
ul {
    -webkit-flex-direction: column;
}
Очень простой пример

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

Упаковка с flex-wrap

По умолчанию flexbox является однострочным. Тот, который не может содержать своих потомков, может переполниться при использовании свойства flex-wrap ; мы можем дать команду flexbox стать многострочным, и в этом случае элементы flexbox могут переноситься. flex-wrap принимает значения, nowrap (значение по умолчанию), wrap & wrap-reverse .

Очень простой пример

Обратите внимание, как в демонстрации элементы «обертываются», так как они не могут содержаться в пределах своего маленького родителя в 100px . Используя инструменты разработчика, попробуйте включить overflow: hidden и -webkit-flex-wrap . Без свойств flex-wrap и overflow элементы переполняют родительский элемент.

Есть полезное сокращенное свойство для flex-direction и flex-wrap , как показано ниже:

1
2
3
4
5
6
7
8
flex-direction: row;
flex-wrap: nowrap;
 
//Using the two values above with the flex-flow shorthand we get:
flew-flow: row nowrap;
 
//flex-direction: column;
flex-flow: column wrap;

Быстрый пример

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

  • Ширина 300px была установлена ​​на самой flexbox для демонстрации упаковки.
  • Общая идея меню может заключаться в использовании медиазапросов для обслуживания дружественного для мобильных устройств меню, где может иметь смысл flex-direction: column
Скучное меню

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

Скучное меню

сгибающий

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

Свойство flex является хорошей особенностью; он предлагает что-то новое, чего было бы трудно достичь в прошлом.

С помощью этого свойства мы можем установить предпочтительный размер для наших товаров. Имейте в виду, что свойство flex применяется к элементам flexbox, а не к самому flexbox. Браузер попытается установить размер элементов flexbox для каждой строки . Затем он попытается равномерно распределить оставшееся свободное пространство на предметах. Если мы посмотрим на пример меню и используем инструменты разработчика, чтобы определить вычисленную ширину элементов flexbox, мы увидим, что это 78px . Давайте исследовать дальше …

Расчетная ширина элемента flexbox

Вы, вероятно, задаетесь вопросом: «Как элементы flexbox получили дополнительное пространство, когда мы установили их предпочитаемую ширину 60px ?»

Расчетная ширина элемента flexbox
  • В первой строке есть три элемента, которые должны иметь свойство около 60pxflex (всего 180px ).
  • Ширина всего flexbox составляет 300px . Это, минус 180px (общий предпочтительный размер предметов), составляет 120px . Тем не менее, не похоже, что у нас на самом деле есть 120px свободного пространства.
  • Каждый элемент flexbox имеет отступ 10px ; это всего 30 30px на три предмета, и у нас остается 90px свободного места.
  • Но подождите, у каждого элемента также есть отступы: 5px — это 5px отступа сверху, справа, снизу и слева. Таким образом, подобно свойству margin-right , каждый элемент использует до 10px отступа относительно его ширины. У нас осталось 60px свободного места — ну, почти.
  • Каждый элемент имеет border: 1px solid black — 1px слева и справа. Всего два пикселя на элемент, так что для трех элементов получается 6 6px . Теперь у нас осталось 54px свободного места.
  • С 54px свободного пространства мы можем распределить это в равной степени по трем элементам в первой строке — это 18px на элемент, что теперь имеет смысл, почему, когда мы установили предпочтение 60px , вычисленная ширина превратилась в 78px .

Как вы уже догадались, последняя строка (содержащая пункт «Свяжитесь с нами») изгибается на всю ширину flexbox.

Элементы Flexbox могут иметь различную ширину; говорят, что элемент с flex 2 вдвое более гибок, чем элемент с flex 1 . Таким образом, когда дело доходит до распределения свободного пространства между двумя предметами, предмету со flex 1 будет предоставлена ​​половина пространства, которое получает предмет со flex 2 .

заказ

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

Учитывая следующую разметку:

1
2
3
4
5
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
1
2
3
4
5
6
7
ul {
    display: -webkit-flexbox;
}
 
ul li:nth-child(1) {
    -webkit-flex-order: 2;
}

Мы можем нацелить первый элемент элемента списка с помощью псевдокласса nth-child , а затем применить к нему свойство flex-order . Элементы Flexbox по умолчанию имеют порядок 0 . Разместив первый элемент списка в порядке 2 , браузер сначала отобразит элементы 2 и 3, за которыми последует элемент 1.

центровка

Мы можем выровнять элементы flexbox по главной оси, используя свойство flex-pack . Это свойство принимает следующие значения:

  • Начало
  • конец
  • центр
  • обосновывать
  • распространять

Демонстрация для этого урока содержит некоторые примеры различных типов выравнивания. Глядя на пример jsbin , мы видим, что элементы были центрированы только на одной оси: главной оси. По сути, это ось, на которой расположены элементы flexbox.

Мы можем изменить ось, flex-direction свойство flex-direction . Установив его в column , становится очевидным, что основная ось изменилась. Чтобы повлиять на выравнивание поперечной оси (оси, перпендикулярной главной оси), мы можем использовать flex-align .

Центрирование предмета

1
2
3
<div class=»flexbox»>
    <p>I should be centered</p>
</div>
01
02
03
04
05
06
07
08
09
10
11
12
13
.flexbox {
    display: -webkit-flexbox;
    -webkit-flex-pack: center;
    -webkit-flex-align: center;
    width: 50%;
    height: 100px;
    background: orange;
}
 
.flexbox p {
    border: 1px solid green;
    padding: 5px;
}

Обязательно посмотрите живую демоверсию, если вы не уверены.

Центрированный пример

Дальнейшее чтение

  • flexiejs предлагает кросс-браузерную поддержку flexbox.
  • Modernizr может обнаружить поддержку flexbox .
  • html5rocks содержит учебник по flexbox
  • Алекс Рассел, который работает в Google Chrome, имеет интересный набор классов CSS для использования flexbox.
  • У insertthtml есть забавное руководство по спецификации flexbox, оно включает в себя большой набор визуальных элементов, которые могут помочь в понимании определенных концепций.
  • В книге Stunning CSS3 есть раздел о flexbox.

Спасибо за прочтение, и обязательно обращайтесь к caniuse.com за списком браузеров, которые поддерживают модуль flexbox, а также с указанием префиксов поставщиков.

38
Share: