Хабрахабр

[Перевод] Что происходит при создании контейнера Flexbox?

Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.

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

В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.

Flex контейнер, пожалуйста!

В вашем CSS вы используете display: flex: Чтобы использовать Flexbox, вам нужен элемент, который будет flex контейнером.

В спецификации Display Module Level 3 каждое значение просмотра описывается как комбинация двух элементов: внутренней и внешней модели отображения. Давайте немного поразмышляем о том, что на самом деле означает display: flex.

Внешний тип отображения нашего flex-контейнера блок; он действует как элемент уровня блока в стандартном потоке. Когда мы добавляем display: flex, мы в действительности определяем display: block flex. Внутренний тип отображения flex, поэтому элементы непосредственно внутри нашего контейнера будут участвовать во flex-компоновке.

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

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

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

Строки Или Столбцы?

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

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

  • column;
  • row-reverse;
  • column-reverse.

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

main-start — начало строчного направления Рис_1
Рис_1.

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

main-start — начало блочного направления Рис_2
Рис_2.

Если мы используем row-reverse, расположение main-start и main-end поменяются местами; поэтому элементы будут выкладываются один за другим в обратном порядке.

main-start — от конца строчного направления Рис_3
Рис_3.

Значение column-reverse делает то же самое.

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

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

Две оси flexbox

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

е. Мы уже сталкивались с главной осью, т. Поперечная ось это другое направление. осью, которую вы определяете как значение flex-direction. С помощью flex-direction: column главная ось расположится вниз по столбцу, а поперечная — вдоль строки. Если вы установили flex-direction: row, ваша главная ось находится вдоль строки, а поперечная — вниз по столбцу. Мы не говорим о строке, идущей слева направо, или столбце сверху вниз, потому что это не всегда так. Именно здесь нам нужно рассмотреть еще одну важную особенность Flexbox, и это тот факт, что он не привязан к физическим направлениям экрана.

РЕЖИМЫ ЗАПИСИ

Эта статья написана на английском языке, который имеет горизонтальный режим записи. Когда я выше описывала строку и столбец, я упомянула блочное и строчное направления. В этом случае main-start находится слева — на месте, с которого начинаются предложения на английском языке. Это означает, что когда вы попросите Flexbox предоставить вам строку, вы получите горизонтальное отображение ваших flex элементов.

Если бы я работала на языке справа налево, таком как арабский, то стартовое ребро было бы справа:

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

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

Это все еще flex-direction строка, даже если нашим умам, привычным к горизонтальному тексту, трудно думать о строке, работающей вертикально! Таким образом, ряд может работать горизонтально, с main-start слева или справа, а также работать вертикально с main-start вверху.

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

Если вы зададите столбец в vertical-lr, ваши блоки будут запускаться слева направо по вертикали: В вертикальном режиме записи блочное направление проходит поперек страницы, так как это направление блоков, расположенных в этих режимах записи.

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

Мы не ссылаемся на "лево и право" или "верх и низ" в Flexbox и Grid, потому что мы не делаем никаких предположений относительно режима записи нашего документа. Понимание того факта, что строка или столбец могут выполняться в разных физических направлениях, полезно для понимания некоторых терминов, используемых для Grid и Flexbox. Весь CSS становится более осведомленным о режиме записи.

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

В качестве резюме, запомните, что:

  • flex-direction: row
    • главная ось = рядное направление (inline dimension);
    • main-start будет там, где начинаются предложения в этом режиме записи;
    • поперечная ось = блочное направление (block dimension);
  • flex-direction: column
    • главная ось = блочное направление (block dimension);
    • main-start будет там, где блоки начинают выкладываться в этом режиме записи ;
    • поперечная ось = рядное направление (inline dimension).

Начальное выравнивание

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

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

ВЫРАВНИВАНИЕ ГЛАВНОЙ ОСИ

Это как бы наш CSS был таким: Начальное значение свойства justify-content установлено в flex-start.

.container { display: flex; justify-content: flex-start;
}

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

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

Другие возможные значения для justify-content:

  • flex-end;
  • center;
  • space-around;
  • space-between;
  • space-evenly (добавлено в Box Alignment).

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

Без высоты у flex-контейнера нет свободного места, поэтому установка параметра justify-content: space-between ничего не даст. Вы можете увидеть это, если переключите flex-direction на столбец. Если добавить высоту и сделать так, чтобы контейнер был выше, чем требуется для отображения элементов, то свойство будет иметь эффект:

ВЫРАВНИВАНИЕ ВДОЛЬ ПОПЕРЕЧНОЙ ОСИ

Выравнивание, которое мы выполняем, заключается в выравнивании блоков друг относительно друга в ряд. Элементы также выравниваются в одну строку вдоль поперечной оси flex-контейнера. Что-то подсказывает другим блокам растянуться до той же высоты. В следующем примере один из наших блоков имеет больше содержимого, чем все остальные. Это свойство align-items, которое имеет начальное значение stretch:

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

  • flex-start;
  • flex-end;
  • center;
  • baseline.

Если вы не хотите, чтобы все блоки растягивались на высоту самых высоких, то установка align-items: flex-start приведет к выравниванию их всех по начальному краю поперечной оси.

Начальные значения для элементов Flex

Наконец, сами flex элементы также имеют начальные значения, они установлены в:

  • flex-grow: 0;
  • flex-shrink: 1;
  • flex-basis: auto.

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

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

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

При flex-basis в auto и отсутствии указания размеров элементов, они имеют базовый размер max-content. Это гибкость Flexbox в действии. В этом случае свободное пространство делится между элементами в пропорции, описанной в следующем примечании спецификации flexbox. Это был бы размер, когда бы они растянулись и не выполняли перенос строки.

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

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

Элементы переносятся для придания большему элементу больше места Рис_4
Рис_4.

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

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

Заключение

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

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

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

Теги
Показать больше

Похожие статьи

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть