Понимание Flexbox: все, что вам нужно знать

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

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

Примечание о кривой обучения Flexbox

Вот твит Филипа Робертса, разработчика, которого я очень уважаю:

Изучение Flexbox поначалу может быть неинтересным. Это бросит вызов тому, что вы знаете о макетах в CSS. Но это нормально. Так начинается все, чему стоит научиться.

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

Что вы узнаете

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

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

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

Разве это не выглядит красиво?

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

Я рад показать вам все это.

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

Давайте начнем.

Вступление

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

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

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

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

Теперь мы все можем отказаться от этих хитрых приемов CSS. Больше никакого постоянного использования поплавков, отображения ячеек таблицы.

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

Что такое Flexbox?

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

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

Пишете ли вы CSS во сне или только начинаете, вы будете чувствовать себя как дома.

Как начать использовать модель Flexbox?

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

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

В обычном HTML простой список элементов принимает такую форму:

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

Если вы взглянули на это, то, должно быть, заметили, что неупорядоченный список (ul) содержит элементы списка (li).

Вы бы назвали ul элементом родительским, а li - элементом дочерним.

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

Вы делаете это, устанавливая display: flex или display: inline-flex для встроенного варианта. Это так просто, и теперь вы готовы к использованию модели Flexbox.

На самом деле происходит то, что контекст форматирования Flexbox запускается немедленно.

Сказал, что это было не так сложно, как вы ожидали.

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

/*Make parent element a flex container*/
ul {
  display: flex; /*or inline-flex*/
}

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

li {
  width: 100px;
  height: 100px;
  background-color: #8cacea;
  margin: 8px;
}

Вот что у вас должно получиться:

Возможно, вы не заметили, но что-то уже произошло. Контекст форматирования Flexbox теперь инициирован.

Помните, что элементы «li» по своей природе являются блочными, что означает, что они располагаются вертикально, и это применимо к другим блочным элементам CSS, таким как «div».

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

Однако с включением этого простого однострочника display:flex вы сразу заметите изменение макета.

Элементы списка теперь расположены горизонтально слева направо. Точно так же, как если бы вы использовали float.

Модель Flexbox срабатывает, как только вы вводите «гибкий дисплей» в любой родительский элемент.

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

Понимание того, что включение «гибкого дисплея» начинается с модели Flexbox.

Есть еще одна вещь, на которую я должен обратить ваше внимание.

Как только вы установите для свойства display значение flex, неупорядоченный список автоматически станет гибким контейнером, а дочерние элементы (в данном случае элементы списка li) станут гибкими элементами .

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

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

Контейнер Flex: родительский элемент, который вы установили display: flex.
Элементы Flex: дочерние элементы в контейнере Flex.

Это основа для использования модели Flexbox.

Свойства гибкого контейнера

Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content

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

Сейчас хорошее время, чтобы использовать все это с пользой.

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

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

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

1. Гибкое направление

Свойство Flex-direction управляет направлением, в котором гибкие элементы располагаются вдоль главной оси.

Может принимать любое из четырех значений.

/*where ul represents a flex container*/
ul {
  flex-direction: row || column || row-reverse || column-reverse;
  }

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

Технически, «горизонтальный» и «вертикальный» - это не то, что направления называются в «гибком мире».

Они описаны как главная ось и поперечная ось. Значения по умолчанию показаны ниже.

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

Поперечная ось выглядит как «вертикальная» сверху вниз.

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

Несмотря на то, что свойство flex-direction не было задано явно, оно приняло значение по умолчанию row.

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

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

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

2. Флекс-пленка

Свойство flex-wrap может принимать любое из трех значений:

//where ul represents a flex container
ul {
  flex-wrap: wrap || nowrap || wrap-reverse;
  }

Я объясню, как работает свойство flex-wrap, на примере.

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

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

/*adding 3 more li elements*/
<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
  <li></li>
  <li></li>
  <li></li>
</ul>

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

Пойдем немного дальше.

Добавьте к родительскому элементу невероятное количество flex-элементов. Сделайте всего 10 предметов.

Что происходит?

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

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

Это связано с тем, что для свойства flex-wrap по умолчанию установлено значение nowrap. Это приводит к тому, что гибкий контейнер НЕ оборачивается.

ul {
    flex-wrap: nowrap; 
    /*Keep on taking more flex items without breaking (wrapping)*/
}

no-wrap - это не железная ценность. Это можно изменить.

С таким количеством гибких элементов вы определенно хотите, чтобы они «обертывали» внутри гибкого контейнера.

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

Это возможно с wrapvalue.

ul {
    flex-wrap: wrap;
}

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

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

Вот как это выглядит.

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

Еще одно значение wrap-reverse.

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

3. Гибкий поток

flex-flow - это сокращенное свойство, которое принимает значения flex-direction и Flex-wrap.

Вы когда-нибудь использовали сокращенное свойство border? border: 1px solid red.

Здесь та же концепция. В одной строке объявлено несколько значений.

См. Пример ниже.

ul {
    flex-flow: row wrap; /*direction "row" and yes, please wrap the items.*/
}

Попробуйте другие возможные комбинации. flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap

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

Я уверен, вы понимаете, что из этого получится.

Дайте им попробовать.

4. Обоснование содержания

С моделью Flexbox жизнь действительно хороша. Если вы все еще сомневаетесь в этом, свойство justify-content может вас убедить.

Свойство justify-content принимает любое из 5 значений ниже.

ul {
    justify-content: flex-start || flex-end || center || space-between || space-around
}

И что именно свойство justify content приносит в таблицу?

Что ж, это может напомнить вам свойство text-align.

Свойство justify content определяет, как гибкие элементы располагаются на главной оси.

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

Рассмотрим простой неупорядоченный список ниже.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Добавьте базовый стиль.

ul {
    border: 1px solid red;
    padding: 0;
    list-style: none;
    background-color: #e8e8e9;
  }
li {
      background-color: #8cacea;
      width: 100px;
      height: 100px;
      margin: 8px;
      padding: 4px;
  }

У вас должно получиться вот что:

С justify-content property три гибких элемента могут быть выровнены по главной оси любым желаемым образом.

Вот разбивка того, что возможно.

(i) Гибкий старт

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

flex-start группирует все гибкие элементы в начало главной оси.

ul {
    justify-content: flex-start;
  }

(ii) Гибкий конец

flex-end группирует элементы гибкости до конца главной оси.

ul {
    justify-content: flex-end;
  }

(iii) Центр

Center делает именно то, что вы ожидаете: он центрирует гибкие элементы по главной оси.

ul {
    justify-content: center;
  }

(iv) Пространство между

Space-between сохраняет одинаковое пространство между каждым гибким элементом.

ul {
    justify-content: space-between;
  }

Вы заметили здесь что-нибудь другое?

Взгляните на описательное изображение ниже.

(v) Космос вокруг

Наконец, space-around сохраняет тот же интервал вокруг гибких элементов.

ul {
    justify-content: space-around;
  }

Второй взгляд не повредит.

См. Описательное изображение ниже.

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

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

5. Выравнивание предметов

Свойство align-items чем-то похоже на свойство justify-content.

Поняв свойство justify-content, это должно быть легче понять.

Align-items можно задать любое из следующих значений: flex-start || flex-end || center || stretch || baseline

/*ul represents any flex container*/
ul {
    align-items: flex-start || flex-end || center || stretch || baseline
}

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

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

Не забывайте направление, на которое влияют эти свойства. Поперечная ось.

(i) Растяжка

Значение по умолчанию - stretch.. Это приведет к «растяжению» гибких элементов, чтобы они заполнили всю высоту гибкого контейнера.

(ii) Гибкий старт

flex-start делает то, что вы ожидаете. Он группирует элементы гибкости в начале поперечной оси.

(iii) Гибкий конец

Как и ожидалось, flex-end группирует элементы гибкости до конца поперечной оси.

(iv) Центр

Значение center одинаково предсказуемо. Он выравнивает элементы гибкости по центру гибкого контейнера.

(v) Исходный уровень

А базовое значение?

Он выравнивает гибкие элементы по их базовым линиям.

«Базовый уровень» действительно звучит круто.

Результат выглядит так же, как flex-start, но немного отличается.

Что, черт возьми, такое «базовая линия»?

Изображение ниже должно помочь.

Обратите внимание, как все гибкие элементы выровнены, чтобы их содержимое находилось на «базовой линии»?

6. Align-content

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

У вас есть гибкий контейнер многострочный.

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

Принимает те же значения, что и align-items, за исключением baseline.

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

Как и align-items, значение по умолчанию также stretch

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

(i) Растяжка

С stretch гибкие элементы «растягиваются», чтобы соответствовать доступному пространству вдоль поперечной оси.

Интервал, который вы видите между элементами гибкости ниже, обусловлен margin, установленным для элементов.

(ii) Гибкий старт

Вы уже видели значение flex-start.

На этот раз он выравнивает элементы в многострочном контейнере по началу поперечной оси.

Помните, что поперечная ось по умолчанию - сверху вниз.

Таким образом, гибкие элементы выравниваются по верху гибкого контейнера.

(iii) Гибкий конец

Значение flex-end выравнивает элементы гибкости по концу поперечной оси.

(iv) Центр

Как вы уже догадались, center выравнивает гибкие элементы по центру поперечной оси.

Это последнее из свойств гибкого контейнера.

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

Вы будете использовать их для проработки следующих практических разделов.

Свойства элемента Flex

Order || Flex-grow || Flex-shrink || Flex-basis

В предыдущем разделе я объяснил гибкие контейнеры и их свойства выравнивания.

Действительно красиво.

Конечно, вы чувствуете, что вас ждет впереди.

Я бы сейчас отвлекся от гибких контейнеров и расскажу вам о гибких элементах и их свойствах выравнивания.

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

Позвольте мне провести вас через них.

1. Заказать

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

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

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

Значение по умолчанию для свойства порядка - 0. Оно может принимать как отрицательные, так и положительные значения.

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

Пример всегда помогает. Рассмотрим неупорядоченный список ниже:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>                          
</ul>

По умолчанию все элементы гибкости имеют order значение 0.

Как и ожидалось, вы получите это (см. Ниже) после некоторой базовой стилизации.

Элементы Flex отображаются в том порядке, в котором они указаны в исходном порядке HTML. Изогните элемент 1, затем 2, 3 и 4.

Что, если по какой-то причине вы хотите, чтобы элемент flex-item 1 отображался последним? Без изменения исходного порядка в HTML-документе?

«Без изменения исходного порядка» означает, что вы не можете этого сделать:

<ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>1</li>                      
</ul>

Вот тут-то и пригодится свойство order.

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

Если вы когда-либо использовали свойство z-index для блочных элементов, вы были бы знакомы с подобными вещами.

/*select first li element within the ul */
    li:nth-child(1) {
        order: 1; /*give it a value higher than 0*/
    }

Затем элементы гибкости переупорядочиваются от наименьшего к высшему.

Не забывайте, что по умолчанию все элементы списка 2, 3 и 4 имеют значение порядка 0.

Теперь flex-item 1 имеет значение порядка 1.

Все элементы Flex-items 2, 3 и 4 имеют значение порядка 0. Таким образом, исходный порядок HTML сохраняется - никаких изменений в отображении по умолчанию не производится.

Что, если бы вы присвоили гибкому элементу 2 значение порядка 2?

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

А что происходит, когда два гибких элемента имеют одинаковую стоимость заказа?

В приведенном ниже примере гибким элементам 1 и 3 присваиваются одинаковые order значения.

li:nth-child(1) {
        order: 1;
    }
li:nth-child(3) {
        order: 1;
    }

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

На этот раз гибкий элемент 3 появляется последним, потому что он идет после гибкого элемента 1 в исходном файле (документе HTML).

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

Это было много объяснений.

Я бы переехал в другую собственность.

2. Гибкость-рост и гибкость-усадка

Прелесть гибких элементов в их «гибкости».

Свойства flex-grow и flex-shrink позволяют нам еще больше обойти эту «гибкость».

Свойства flex-grow и flex-shrink управляют тем, насколько гибкий элемент должен «расти» (расширяться), если есть лишние пробелы, или «сжиматься», если лишних пробелов нет.

Они могут принимать любые значения от 0 до любого положительного числа. 0 || positive number

Позвольте мне прояснить это.

Рассмотрим простой неупорядоченный список ниже. Он состоит всего из одного пункта списка.

<ul>
    <li>I am a simple list</li>
</ul>
ul {
    display: flex;
}

С немного большим стилем это выглядит так.

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

Значение 0 похоже на выключатель. Выключатель flex-grow выключен.

Однако, если вы изменили значение flex-grow на 1, произойдет вот что.

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

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

Почему? По умолчанию для свойства shrink установлено значение 1. Это означает, что переключатель flex-shrink также включен!

Я немного подробнее рассмотрю свойства flex-grow и flex-shrink на тот случай, если вы все еще не уверены в своем понимании этого.

3. Флекс-основа

Помните, как я сказал, что прелесть гибких элементов в их «гибкости»? Что ж, похоже, у вас тоже есть контроль над этим.

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

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

Значение по умолчанию - flex-basis: auto. Flex-basis может принимать любые значения, которые вы использовали бы в свойстве нормальной ширины. То есть percentages || ems || rems || pixels и т. Д.

Обратите внимание, что при попытке установить для базового свойства значение, отсчитываемое от нуля, также используйте единицу измерения. Используйте flex-basis: 0px not just flex-basis: 0

Я бы снова вернулся к примеру с «одним списком».

<ul>
    <li>I am a simple list</li>
</ul>

ul {
    display: flex
}
li {
    padding: 4px; /*some breathing space*/
}

По умолчанию на начальную ширину гибкого элемента влияет значение по умолчанию flex-basis: auto.

Ширина гибкого элемента вычисляется «автоматически» на основе размера содержимого (и, очевидно, плюс любое заданное вами заполнение).

Это означает, что если вы увеличили содержимое гибкого элемента, он автоматически изменится в соответствии с размером.

<ul>
    <li>I am a simple list AND I am a simple list</li>
</ul>

Если, однако, вы хотите установить для гибкого элемента фиксированную ширину, вы также можете сделать это:

li {
    flex-basis: 150px;
}

Теперь ширина гибкого элемента ограничена 150 пикселями.

Становится еще интереснее.

4. Сокращение гибкости

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

Когда это уместно, я советую вам установить все три свойства сразу, используя сокращение flex, а не делать это по отдельности.

li {
  flex: 0 1 auto;
}

Приведенный выше код эквивалентен установке трех свойств: flex-grow: 0; flex-shrink: 1; flex-basis: auto

Обратите внимание на порядок.

Сначала Flex-grow, затем flex-shrink, а затем flex-basis. Сокращение GSB может помочь.

Что произойдет, если вы не сможете установить одно из значений в сокращении гибкости?

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

Это называется абсолютной гибкостью. А когда вы устанавливаете только flex-basis, вы получаете относительную гибкость.

/*this is an absolute flex item*/
li {
  flex: 1 1; /*flex-basis defaults to 0*/
}
/*this is a relative flex item*/
li {
  flex-basis: 200px; /*only flex-basis is set*/
}

Я знаю, о чем ты думаешь. Какова цель относительной и абсолютной гибкости?

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

Давайте взглянем на некоторые очень полезные сокращенные значения гибкости.

`1. flex: 0 1 auto`

/*again, the "li" represents any flex-item*/
li {
  flex: 0 1 auto;
}

Это то же самое, что и запись flex: default, и это поведение по умолчанию для всех гибких элементов.

Позвольте мне немного рассказать об этом.

Это легче понять, сначала взглянув на свойство flex-basis.

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

Понял?

Переходя к следующему свойству, значение flex-grow равно нулю. Это означает, что свойство flex-grow не изменяет исходную ширину гибкого элемента.

Переключатель роста выключен.

Поскольку flex-grow контролирует «рост» гибких элементов и установлен на ноль, гибкие элементы не будут «расти» до размеров экрана.

Наконец, значение гибкости равно 1. В нем говорится следующее: «сжимайте гибкий элемент, когда это необходимо»

Вот как это выглядит в применении к некоторым гибким элементам.

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

2. `Flex: 0 0 auto`

/*again, the "li" represents any list-item*/
li {
  flex: 0 0 auto;
}

Это то же самое, что и flex: none.

Используя ту же структуру, которую я установил ранее, ширина вычисляется автоматически, НО элемент гибкости НЕ растет и не сжимается (они оба установлены в ноль).

Переключатели увеличения и сжатия выключены.

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

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

Первое, что вы должны заметить, это то, что гибкие элементы имеют разную ширину.

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

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

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

3. `Flex: 1 1 auto`

Это то же самое, что и flex: auto.

Используйте структуру, которую я установил ранее.

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

Включены переключатели увеличения и сжатия, а ширина вычисляется автоматически.

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

4. `Flex: "positive number"`

Где «положительное число» представляет любое положительное число (без кавычек).

Это то же самое, что и flex: “positive number” 1 0.

flex: 2 1 0 то же самое, что и записьflex:2 2 представляет любое положительное число.

/*again, the "li" represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

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

Каким образом вычисляется ширина, если у гибких элементов указано «без ширины»?

Значение flex-grow вступает во владение и определяет степень «расширения» гибкого элемента.

Это решает проблему отсутствия ширины.

Более практично использовать это сокращение гибкости, когда у вас есть более одного гибкого элемента, начальная ширина которого flex-basis установлена на любые значения, отсчитываемые от нуля, например 0px

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

Я бы немного разбил это.

Рассмотрим два элемента списка, помеченных и стилизованных ниже.

<ul>
    <li>I am One</li>
    <li>I am Two</li>
</ul>
ul {
    display: flex;
}
/*first flex-item*/
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}
/*second flex-item*/
li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

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

Здесь у вас есть два flex-элемента. У одного есть свойствоflex-grow 1, а у другого 2, что тогда происходит?

У вас включены переключатели роста для обоих элементов. Однако масштабы роста различаются. 1 и 2.

Оба они расширяются, чтобы заполнить доступное пространство, но в определенной пропорции.

Вот как это работает.

Последний занимает 2/3 доступного пространства, а первый - 1/3.

Вы знаете, как я к этому пришел?

Коэффициент основной математики. individual ratio / total ratio Надеюсь, вы не пропустили эти уроки математики.

Вы видите, что происходит?

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

Ширина зависит не от размера содержимого, а от значений роста.

Одно примерно в два раза больше другого.

5. Самостоятельное выравнивание

Свойство align-self делает еще один шаг вперед, давая нам так много контроля над гибкими элементами.

Вы уже видели, как свойство align-items помогает в коллективном выравнивании всех гибких элементов в гибком контейнере.

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

Здесь на помощь приходит свойство align-self.

Может принимать любое из следующих значений: auto || flex-start || flex-end || center || baseline || stretch

/*target first list item*/
li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

Это ценности, с которыми вы уже знакомы, но в качестве напоминания рассмотрим, как они влияют на конкретный целевой элемент.

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

Целевой гибкий элемент выделен красным.

1. Гибкий конец

flex-end выравнивает целевой элемент по концу поперечной оси.

`2. Center`

center выравнивает целевой элемент по центру поперечной оси.

`3. Stretch`

stretch «растягивает» целевой гибкий элемент, чтобы заполнить доступное пространство вдоль поперечной оси.

`4. Baseline`

baseline выравнивает целевой гибкий элемент по базовой линии.

Это похоже на тот же результат, что и flex-start, но я уверен, что вы понимаете, что такое базовый уровень.

Я объяснил это намного раньше.

`5. auto`

auto устанавливает значение целевого гибкого элемента равным align-items значению родителя или stretch, если у элемента нет родителя.

В приведенном ниже случае гибкий контейнер имеет align-items значение flex-start.

Это выравнивает все гибкие элементы по началу поперечной оси.

Целевой гибкий элемент теперь наследует значение flex-start - значение align-items родителя.

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

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}
li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

Вы уже почти готовитесь к самой интересной части :-)

Абсолютные и относительные flex-элементы.

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

В чем на самом деле разница между абсолютным и относительным flex-элементом?

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

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

Обратите внимание на разметку ниже.

<ul>
    <li>
        This is just some random text  to buttress the point being explained.
    Some more random text to buttress the point being explained.
    </li>
    <li>This is just a shorter random text.</li>
</ul>

Два элемента списка. В одном текстов гораздо больше, чем в другом.

Добавьте немного стиля.

ul {
    display: flex; /*flexbox activated*/
}
li {
    flex: auto; /*remember this is same as flex: 1 1 auto;*/
    border: 2px solid red;
    margin: 2em;
}

Вот результат:

Если вы уже забыли, flex: 1 1 auto совпадает с настройкой: flex-grow: 1 flex-shrink: 1 и flex-basis: auto

Используя структуру, которую я установил ранее, начальная ширина гибких элементов автоматически вычисляется flex-basis: auto, а затем они «растут», чтобы соответствовать доступному пространству flex-grow: 1.

Когда ширина гибких элементов вычисляется автоматически, flex-basis: auto, она основана на размере содержимого, содержащегося в гибких элементах.

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

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

Гибкие элементы в приведенном выше примере являются относительными гибкими элементами.

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

«однострочный» творит чудеса.

li {
    flex: 1 ; /*same as flex: 1 1 0*/
}

Смотрите результат ниже.

Вы видите, что на этот раз оба элемента flex имеют одинаковую ширину?

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

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

Я уже говорил об этом раньше.

Теперь ширина не рассчитывается на основе размера содержимого. Ширина зависит от указанного значения гибкости.

Итак, вы поняли. Верно?

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

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

Остерегайтесь `margin: auto` выравнивания гибких элементов.

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

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

Когда вы используете margin: auto на гибком элементе, направление (влево, вправо или оба), имеющее значение auto, займет все доступные пустые места.

Это сложно уловить.

Вот что я имею в виду.

Рассмотрим панель навигации, обозначенную и стилизованную ниже:

<ul>
    <li>Branding</li>
    <li>Home</li>
    <li>Services</li>
    <li>About</li>
    <li>Contact</li>
</ul>
ul {
    display: flex;
}
li {
    flex: 0 0 auto;
}

Смотрите результат ниже.

Здесь следует отметить несколько моментов:

Значение flex-grow установлено на ноль. Это объясняет, почему элементы списка не увеличиваются.
Гибкие элементы выровнены по началу главной оси (поведение по умолчанию)
Из-за того, что элементы выровнены по началу главной оси, справа остается некоторое дополнительное пространство. Ты видишь это?

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

li:nth-child(1) {
    margin-right: auto; /*applied only to the right*/
}

Что сейчас произошло?

Существующее дополнительное пространство теперь распределено справа от первого гибкого элемента.

Вы помните, что я сказал ранее?

Когда вы используете margin:auto на гибком элементе, направление (влево, вправо или оба), имеющее значениеauto, займет все доступные пустые места.

Что, если вам нужно автоматическое выравнивание полей с обеих сторон гибкого элемента?

/*you may use the margin shorthand to set both sides if you wish*/
li:nth-child(1) {
    margin-left: auto;
    margin-right: auto
}

Теперь пространство распределяется по обеим сторонам гибкого элемента.

Итак, есть ли компромисс с классным автоматическим выравниванием маржи?

Похоже, что он есть. Если вы тоже не обращаете внимания, это может стать источником разочарования.

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

Например, установка другого параметра выравнивания в гибком контейнере выше с помощью свойства justify-content не влияет на макет.

ul {
    justify-content: flex-end;
}

Практические варианты использования

Системы навигации - это очень большая часть каждого веб-сайта или приложения. На каждом веб-сайте на планете есть какая-то навигационная система.

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

Видите ли вы, как Flexbox может помочь вам более эффективно создавать эти макеты?

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

(i) Начальная навигация

(ii) Настольная навигация AirBnB

(iii) Навигация на рабочем столе Twitter.

Я рекомендую вам писать код в качестве практики. Я написал здесь практическое руководство: Самые популярные панели навигации, созданные с помощью Flexbox

Иди взгляни.

Я буду ждать.

Что происходит, когда вы меняете направление гибкости?

Честное предупреждение: на подходе есть несколько странных вещей.

Когда вы начинали изучать модель Flexbox, эта часть была самой запутанной.

Бьюсь об заклад, многие новички в «мире гибкости» тоже находят это таким же.

Вы помните, когда я говорил о том, что основная и поперечная оси по умолчанию расположены в направлениях «слева направо» и «сверху вниз»?

Что ж, вы тоже можете это изменить.

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

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

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

Это одинаковое направление для основной и поперечной оси Flexbox по умолчанию.

Однако при переключении направления гибкости на column он больше не следует шаблону «английский язык», а соответствует японскому!

Ах да, японец.

Если вы написали какой-либо текст на японском языке, это будет вам знакомо. (Кстати, я никогда не писал текст на японском.)

Текст на японском языке традиционно пишется сверху вниз! Не так уж и странно, да?

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

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

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
ul {
    display: flex;
    flex-direction: column;
}

Вот как выглядело изменение направления:

А потом:

Так что случилось?

«Текст» теперь пишется по-японски - сверху вниз (основная ось).

Я хотел бы отметить, что есть кое-что, что может показаться вам смешным.

Вы видите, что ширина предметов заполняет пространство, верно?

Если бы вы изменили это раньше, вы бы имели дело только со свойствами flex-basis и (или) flex-grow.

Посмотрим, как это повлияет на наш новый макет.

li {
    flex-basis: 100px;
}

… И вот что вы получите.

Вау - что? На высоту влияет, а на ширину нет?

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

Я был неправ - точнее говоря, я думал на «английском». Давайте ненадолго переключимся на японский.

Это не всегда должно быть «шириной».

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

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

Направление сменилось!

Так что даже если вы использовали свойство flex-grow, это повлияло бы и на высоту.

По сути, каждое свойство гибкости, которое работало на горизонтальной оси (тогдашней главной оси), теперь работает вертикально, новой главной оси.

Это просто переключатель направлений.

Еще один пример. Обещаю, после этого у вас будет лучшее понимание.

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

li {
    width: 200px;
}

Что, если вы хотите переместить элементы списка в центр экрана?

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

Итак, вы бы использовали justify-content: center

Но сделать это сейчас не получится.

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

Взгляните еще раз:

Поэтому, пожалуйста, думайте о японском тексте.

Основная ось идет сверху вниз, вам это не нужно.

Поперечная ось слева направо. Похоже на то, что вам нужно.

Вам нужно «переместить гибкие элементы в центр поперечной оси».

Любое свойство гибкого контейнера звонит здесь в колокол?

Да, собственность align-items.

Свойство align-items отвечает за выравнивание по поперечной оси.

Итак, чтобы переместить их в центр, вы должны сделать это:

ul {
    align-items: center;
}

И вуаля! У вас есть гибкие элементы по центру.

Я знаю, это может немного запутать. Если нужно, просто повторите это еще раз.

Изучая модель Flexbox, я заметил, что многие книги по CSS пропускают эту часть.

Немного подумать о японском тексте очень поможет.

Стоит понимать, что все свойства Flexbox работают на основе flex-direction, который действует.

Я уверен, что ты снова узнал что-то новое. Мне весело это объяснять. Надеюсь, тебе тоже весело :-)

О, черт возьми, Flexbox решил это?

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

Филип Уолтон в своем проекте с помощью flexbox перечисляет 6 классических задач (на момент написания этой статьи).

Он подробно обсуждает предыдущие ограничения CSS и текущее решение, которое предоставляет Flexbox.

Я рекомендую вам внимательно изучить эту статью.

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

Ошибки Flexbug и ошибки для несовместимых браузеров

Если вы не из тех, кто пишет CSS во сне, возможно, вам стоит посмотреть этот репозиторий на github.

Некоторые люди умнее меня составляют там список ошибок Flexbox и их обходных путей.

Я в первую очередь смотрю, когда что-то работает не так, как я ожидал.

Я также расскажу вам о некоторых заметных ошибках в следующем практическом разделе.

Итак, вы прикрыты!

Создание макета музыкального приложения с помощью Flexbox

Пройдя через скучные и строгие вещи, вы заслуживаете веселого проекта.

Пришло время рассмотреть практический пример и применить недавно приобретенные навыки Flexbox.

На создание хорошего проекта у меня ушло несколько дней.

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

Я называю это кошачьей музыкой.

Может быть, к 2036 году где-нибудь на Марсе у нас появятся кошки, поющие в рок-группах :-)

Вот как выглядит готовый макет, полностью оформленный с помощью Flexbox.

Посмотреть его можно онлайн здесь.

Если вы посмотрите это на мобильном устройстве, у вас будет немного другой вид. Это то, над чем вы поработаете в разделе этой статьи, посвященном адаптивному дизайну.

Но я должен признаться.

Я сделал что-то, что многие считают неправильным.

Я полностью построил общий макет с помощью Flexbox.

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

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

Flexbox - это круто, но здесь НЕ приветствуются!
Flexbox, пожалуй, лучшее, что случалось с большинством из нас (если вы пишете css), но делает его идеальным для всех … medium.com

Вот, я снял это с моей груди. Теперь я уверен, что никто не станет на меня кричать, прочитав это.

Все в Catty Music построено с использованием модели Flexbox - это сделано намеренно, чтобы показать, что возможно.

Итак, давайте построим эту штуку!

Как и в любом разумном проекте, небольшое планирование помогает избавиться от неэффективности.

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

С чего начать?

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

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

Разрушение

У вас может быть общее содержащее тело в виде гибкого контейнера (содержащегося в красной рамке на изображении ниже), а другие разделы макета могут быть разделены на гибкие элементы (элементы 1 и 2).

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

Знаете ли вы, что гибкий элемент можно также сделать гибким контейнером?

Ага, это возможно!

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

Итак, с этим новым откровением приходит…

Пункт 1 (первый flex-элемент) также может быть выполнен в виде гибкого контейнера.

Боковая панель (элемент 1b) и основной раздел (элемент 1a) будут гибкими элементами.

Ты все еще со мной, правда?

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

Когда вы начнете создавать еще более сложные макеты с помощью модели Flexbox, вы увидите, насколько это важно.

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

Вы помните, я сказал, что вы можете гнездиться так глубоко, как хотите? Похоже, вы можете сделать еще одно гнездо здесь.

Взгляните на основной раздел выше (пункт 1a).

Его также можно было бы сделать гибким контейнером для размещения секций, выделенных ниже. «Пункты 1a - A» и «Пункты 1a - B»

Вы можете решить не делать основной раздел (элемент 1a) гибким контейнером, а просто поместить в него два «div» для размещения выделенных разделов.

Да, это возможно, поскольку «Элемент 1a - A» и «Элемент 1a - B» расположены вертикально.

По умолчанию «div» располагаются вертикально. Так работает коробочная модель.

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

«Flex» в Flexbox означает гибкость.

Flex-контейнеры по умолчанию гибкие, отчасти отзывчивые.

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

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

Базовая настройка HTML

Начните с базовой настройки HTML ниже.

<!DOCTYPE html>
  <html>
  <head>
  <title>Catty Music</title>
  </head>
  <body>
<main></main> <!--to contain the main section of the app-->
<footer></footer> <!--to contain the music control buttons and song details-->
</body>
</html>

Так что стиль это ...

html,
  body {
    height: 100%; /*setting this explicitly is important*/
  }
body {
    display: flex; /*flex superpowers activated! */
    flex-direction: column; /*Stack the flex-items (main and footer elements) vertically NOT horizontally*/
  }

Первым шагом к использованию модели Flexbox является создание гибкого контейнера.

Это именно то, что делает приведенный выше код. Он устанавливает для свойства display элемента body значение flex.

Теперь у вас есть гибкий контейнер, элемент body.

Элементы гибкости также определены (элемент 1 и элемент 2) - как в разбивке, сделанной ранее.

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

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

Сделайте так, чтобы нижний колонтитул прилипал к низу.

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

Как ты это делаешь?

main {
    flex: 1 0 auto; /*fill the available space*/
  }
footer {
    flex: 0 0 90px; /*don't grow or shrink - just stay at a height of 90px.*/
  }

См. Комментарии в листинге кода выше.

Благодаря собственности flex-grow. Относительно легко заполнить все пространство основным разделом.

Просто установите для flex-grow значение 1. Вы также должны установить для свойства flex-shrink нулевое значение. Почему?

Причина здесь может быть не очевидна, потому что направление изгиба изменилось.

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

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

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

С этим сокращенным значением вы по-прежнему получаете поведение гибких элементов по умолчанию.

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

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

Пожалуйста, не забывайте структуру, для которой я разбил flex-shorthand свойства. Будет много стенографий.

Теперь, когда все наладилось, давайте добавим немного стиля, чтобы определить интервалы и цвета:

body {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
  }
  footer {
    flex: 0 0 90px;
    padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
  }

Пока ничего волшебного.

Вот что у вас должно получиться сейчас:

Видя, как вещи начинают складываться, вы сделаете это еще лучше.

Исправьте боковую панель.

Если вы пишете код, обновите HTML-документ.

<main>
  <aside> <!--This represents the sidebar and contained in it are icon sets from font-awesome-->
    <i class="fa fa-bars"></i>
    <i class="fa fa-home"></i>
    <i class="fa fa-search"></i>
    <i class="fa fa-volume-up"></i>
    <i class="fa fa-user"></i>
    <i class="fa fa-spotify"></i>
    <i class="fa fa-cog"></i>
    <i class="fa fa-soundcloud"></i>
  </aside>
<section class="content"> <!--This section will house everything other than the sidebar-->
  </section>
</main>

Приведенный выше список достаточно пояснительный.

Для наборов иконок я использую популярную библиотеку Font Awesome.

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

Как объяснялось ранее, раздел «main» выше также будет гибким контейнером. Боковая панель (представленная тегом aside) и раздел будут гибкими элементами.

main {
  flex: 1 0 auto; /*Is a flex item*/
  display: flex; /*I just included this! - now a flex container with flex items: sidebar & main content section*/
  }

Хорошо, становится интересно, да?

Теперь у вас есть основная секция в виде гибкого контейнера. Разберитесь с одним из его гибких элементов - боковой панелью.

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

aside {
   
    flex: 0 0 40px; /*do not grow or shrink. Stay fixed at 40px*/ 
}

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

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

Затем примените свойство выравнивания, чтобы значки располагались на месте.

Посмотрите, как это сделать, в приведенном ниже списке.

aside {
   
    /* ...  */
    display: flex; /*Now a flex-container too*/
  
    
    flex-direction: column; /*stack icons vertically*/
  
    
    /*since direction is changed, this works on the vertical direction*/
    justify-content: space-around;   

    
    align-items: center; /*direction is changed! This affects the horizontal direction. Places Icons in the center*/
  
   
     background-color: #f2f2f2; /*make me pretty*/
  }
     aside i.fa {
        font-size: 0.9em;  /*font size for the icons*/
  }

Я одержимо прокомментировал приведенный выше код и теперь вижу, как все красиво оформлено.

Супер аккуратно, с несколькими строками кода.

Разумные коды, никаких беспорядочных взломов.

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

Положи туда кое-что.

Добавление контента в основной раздел.

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

Что еще более важно, это поможет вам понять следующий листинг кода.

Обновите свой HTML-документ и разместите их в разделе .content.

<section class="content"> <!--This section was empty. Populating it with content-->
<div class="music-head"> <!--First list item: contains music details-->
     <img src="images/cattyboard.jpg" /> <!--Album art-->
     <section class="catty-music"> <!--other details of the album-->
          <div>
            <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
            <p>Unknown Artist</p>
            <p>2016 . Charts . 100 songs</p>
          </div>
         <div> <!--Music controls-->
            <i class="fa fa-play"> &nbsp;Play all</i>
            <i class="fa fa-plus"> &nbsp;Add to</i>
            <i class="fa fa-ellipsis-h">&nbsp;&nbsp;More</i>
          </div>
     </section>
 </div> <!--end .music-head-->
<!--Second list item: Contains a list of all songs displayed-->
<ul class="music-list">  
      <li>
          <p>1. One Dance</p>
          <p>Crake feat CatKid &amp; Cyla</p>
          <p>2:54</p>
          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
          <p>2. Panda</p>
          <p>Cattee</p>
          <p>4:06</p>
          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
          <p>3. Can't Stop the Feeling!</p>
          <p>Catin Cimberlake</p>
          <p>3:56</p>
          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
          <p>4. Work From Home</p>
          <p>Cat Harmony feat Colla</p>
          <p>3:34</p>
          <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
    </ul>
</section>

Гм, я добавил немного больше, чем в прошлый раз, но это довольно просто.

Я заполнил пустой раздел содержимого div, который содержит обложку альбома и некоторые детали кошачьего альбома.

ul содержит список песен из альбома.

название песни, исполнитель, продолжительность и «catty cloud sync» содержатся в отдельных абзацах в списке.

Так что ты собираешься делать со стайлингом?

Видишь, что я сделал?

Во-первых, вы должны сделать раздел .content гибким контейнером.

.content {
    display: flex;
    flex: 1 1 auto; /*this makes sure the section grows to fill the entire available space and shrinks too*/
    flex-direction: column;
}

Вам также следует разобраться с его flex-элементами:

.music-head {
   flex: 0 0 280px; /*Same memo, don't grow or shrink - stay at 280px*/
  display: flex;  
  padding: 40px;
  background-color: #4e4e4e;
}
.music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}

.music-head содержит обложку альбома и другие связанные с ним сведения об альбоме.

Та же памятка, не увеличивайте и не уменьшайте, но сохраняйте высоту 280 пикселей.

Рост? Не по ширине? Да!

В родительском элементе уже был включен flex-direction.

О, вам понадобится это, чтобы быть гибким контейнером позже. Так что вставьте display: flex

.music-list содержит список песен и заполняет оставшееся доступное пространство, совместно используемое с .music-head выше.

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

Пальцы вверх.

Здесь есть несколько проблем.

Список песен ужасен.

2. Раздел с музыкальным оформлением содержит действительно некрасивый текст.

Опять же, я расскажу вам, как решить эти проблемы.

Ниже приведены решения, которые я предлагаю.

Работа со списком песен

Каждый список песен состоит из 4 абзацев. Название песни, исполнитель, продолжительность и «синхронизация кошачьего облака».

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

Flexbox спешит на помощь!

Концепция здесь та же, что используется во многих системах сетки.

Переведите это в код.

li {
  display: flex; /*Paragraphs are now displayed on one line*/
  padding: 0 20px; /*Some breahing space*/
  min-height: 50px;
}
li p {
  flex: 0 0 25%; /*This is the sweet sauce*/
}

Вы видите, что там происходит с абзацами?

flex: 0 0 25%;

«Не увеличивать и не уменьшать, но каждый абзац должен занимать 25% доступного места».

Пространство делится между абзацами поровну.

Используя эту технику

Эта техника бесценна. Вы можете использовать его для создания неравных областей содержимого. Скажем, представление в 2 столбца.

Один раздел может занимать 60% доступного места, а другой - 40%.

.first-section: 0 0 60%;
.second-section: 0 0 40%;

Вы можете использовать эту технику для создания систем сеток.

Вот как теперь должны выглядеть списки.

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

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}
li:nth-child(2n) {
  background-color: #f2f2f2;
}

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

Это то, что у вас должно быть сейчас.

Теперь займемся второй проблемой.

Делаем текст деталей альбома красивее.

Действительно простые вещи, происходящие ниже.

.catty-music{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}
.catty-music div:nth-child(1){
  margin-bottom: auto;
}
.catty-music div:nth-child(2){
  margin-top: 0;
}
.catty-music div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}
.catty-music div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

и ты это сделал.

Вы почти закончили.

Быстрое упражнение

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

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

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

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

Вот это да. Не могу поверить, что ты дошел до этого момента. Замечательно! Теперь вы становитесь ниндзя Flexbox.

Далее вы увидите, как Flexbox помогает создавать адаптивный дизайн.

Адаптивный дизайн с Flexbox

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

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

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

Flexbox как в «гибком блоке».

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

Вот пример.

На помощь снова приходит удобный неупорядоченный список.

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Register</li>
    <li>Login</li>
  </ul>

и немного стилизовать…

ul {
        list-style-type: none;
        display: flex;
        border: 1px solid #4e4e4e;
    }
li {
        flex: 0 0 auto;
        padding: 10px;
        margin: 10px;
        background-color: #8cacea;
        color: #fff;
        font-size: 1em;
    }

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

Вот как выглядит панель навигации.

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

На мобильном устройстве вам нужно расположить элементы навигации вертикально.

Затем идут медиа-запросы.

@media screen and (max-width: 769px) {
/* code here only applies to screen devices that have a width lesser than 769px*/
    
     ul {
        flex-direction: column; /* On smaller devices, switch the direction*/
    }
}

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

Просто примените модель Flexbox к имеющимся у вас знаниям, и все готово.

Кстати, я сделал предположение, что вы понимаете, что такое медиа-запросы.

Если нет, просмотрите краткое описание ниже.

Медиа-запросы

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

Самая популярная форма использования медиа-запросов - это так называемое правило @media.

Это выглядит так:

@media screen and (max-width: 300px) {
  /*write your css in this code block*/
}

Глядя на это, вы почти догадываетесь, что это делает.

«Для экранного устройства с максимальной шириной 300 пикселей… сделайте то и то»

Любые стили в блоке кода будут применяться только к устройствам, которые соответствуют выражению «screen and (max-width: 300px)»

Думаю, это помогло прояснить некоторую путаницу.

Быстрое упражнение

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

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

Вы почти подошли к концу!

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

Заключение

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

Я познакомил вас с пониманием абсолютной и относительной гибкости, автоматического выравнивания полей и переключения направления гибкости.

У вас также была возможность применить свои «навыки гибкости» при создании Catty Music, а затем я также коснулся адаптивного дизайна.

Это был действительно долгий путь.

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

Как браузер поддерживает Flexbox?

Это частый вопрос, который задают при использовании модели Flexbox в производстве.

Я не могу точно ответить на этот вопрос, но сайт caniuse отдает должное этому.

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

В начале своей карьеры я много раз просматривал caniuse и все еще не мог понять, что означают представленные данные. Итак, вот краткое объяснение.

В правом нижнем углу веб-сайта caniuse есть легенда.

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

Вот и все.

Дополнительные ресурсы

Надеюсь, вы найдете это полезным:

Получить всю статью Understanding Flexbox в виде PDF-документа - прямая ссылка
Flexbox Интерактивный курс
Играйте с кодом Catty Music онлайн
Репо для всего учебника« Понимание Flexbox »
Flexbox Froggy: классная игра для Flexbox

Наконец, я должен сказать спасибо за то, что следил за мной.

Хотите стать профи?

Загрузите мою бесплатную шпаргалку по CSS Grid, а также получите два качественных интерактивных курса по Flexbox бесплатно!

Получите их сейчас

Понимание Flexbox: все, что вам нужно знать

Примечание о кривой обучения Flexbox

Что вы узнаете

Вступление

Что такое Flexbox?

Как начать использовать модель Flexbox?

Свойства гибкого контейнера

1. Гибкое направление

2. Флекс-пленка

3. Гибкий поток

4. Обоснование содержания

(i) Гибкий старт

(ii) Гибкий конец

(iii) Центр

(iv) Пространство между

(v) Космос вокруг

5. Выравнивание предметов

(i) Растяжка

(ii) Гибкий старт

(iii) Гибкий конец

(iv) Центр

(v) Исходный уровень

6. Align-content

(i) Растяжка

(ii) Гибкий старт

(iii) Гибкий конец

(iv) Центр

Свойства элемента Flex

1. Заказать

2. Гибкость-рост и гибкость-усадка

3. Флекс-основа

4. Сокращение гибкости

1. flex: 0 1 auto

2. Flex: 0 0 auto

3. Flex: 1 1 auto

4. Flex: "positive number"

5. Самостоятельное выравнивание

1. Гибкий конец

2. Center

3. Stretch

4. Baseline

5. auto

Абсолютные и относительные flex-элементы.

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

Остерегайтесь margin: auto выравнивания гибких элементов.

Практические варианты использования

(i) Начальная навигация

(ii) Настольная навигация AirBnB

(iii) Навигация на рабочем столе Twitter.

Что происходит, когда вы меняете направление гибкости?

О, черт возьми, Flexbox решил это?

Ошибки Flexbug и ошибки для несовместимых браузеров

Создание макета музыкального приложения с помощью Flexbox

С чего начать?

Разрушение

Базовая настройка HTML

Сделайте так, чтобы нижний колонтитул прилипал к низу.

Исправьте боковую панель.

Добавление контента в основной раздел.

Работа со списком песен

Используя эту технику

Делаем текст деталей альбома красивее.

Быстрое упражнение

Адаптивный дизайн с Flexbox

Медиа-запросы

Быстрое упражнение

Заключение

Как браузер поддерживает Flexbox?

Дополнительные ресурсы

Хотите стать профи?

Вопросы по теме

`1. flex: 0 1 auto`

2. `Flex: 0 0 auto`

3. `Flex: 1 1 auto`

4. `Flex: "positive number"`

`2. Center`

`3. Stretch`

`4. Baseline`

`5. auto`

Остерегайтесь `margin: auto` выравнивания гибких элементов.