Что происходит, когда вы создаете макет Flexbox?

• Оригинальный адрес:What Happens When You Create A Flexbox Flex Container?
• Оригинальный автор:Rachel Andrew
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:linxuesia
• Корректор:tian-li, Moonliujk

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

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

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

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

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: display: flex;.

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

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

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

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<em>这个 flex 容器是行内元素，所以另一个行内元素会紧跟它后面显示。</em>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: inline-flex;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: display: inline-flex;.

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

строка или столбец?

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

• column
• row-reverse
• column-reverse

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

main-start— начальная позиция встроенного размера (Large preview).

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

main-start— начальная позиция измерения уровня блока (Large preview).

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

main-startв конце встроенного размера (Large preview).

column-reverseтоже имеет такой же эффект. Также важно отметить, что эти значения не «меняют порядок подэлементов», даже если кажется, что они имеют эффект, они меняют начало выстраивания подэлементов: путем измененияmain-startдля достижения цели. Таким образом, наши подэлементы будут выстраиваться в противоположном направлении просто потому, что они начинаются в конце контейнера.

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

Две оси Flexbox

Мы рассмотрели важную особенность flexbox: возможность переключать ориентацию главной оси со строк на столбцы. Это переключение в направлении осей является причиной того, что я часто нахожу выравнивание в макетах сетки более простым для понимания. Потому что в макете сетки вы можете добиться выравнивания почти одинаково в обоих направлениях. Для гибких макетов это будет более хлопотно, т.к. на главной оси (main axis) и поперечной оси (cross axis) производительность подпунктов неодинакова.

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

режим записи

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

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

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: row;
  direction: rtl;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: row with rtl text.

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

Если вы используете режим вертикального письма и используете направление выравнивания по умолчанию (в данном случае flex-direction: row), то строка будет ориентирована вертикально, потому что именно так располагаются строки в языках вертикального письма. Вы можете попробовать настроить гибкий контейнерwriting-modeсвойство, установите значениеvertical-lr. Теперь вы положилиflex-directionУстановить какrow, подэлементы будут располагаться в вертикальном столбце.

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: row;
  writing-mode: vertical-lr;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: row with a vertical writing mode.

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

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

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

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: column;
  writing-mode: vertical-lr;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: column in vertical-lr writing mode.

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

Знание того, что строка или столбец могут располагаться в разных физических направлениях, помогает нам понять некоторые термины в макете сетки и гибком макете. В сетке и гибкой верстке такие направления, как «влево-вправо», «вверх-вниз» не используются, потому что мы не указываем режим написания документа. Весь CSS теперь больше касается режима написания. Если вас интересуют другие свойства и значения CSS, которые уже поддерживают эту разницу направлений, вы можете прочитать эту мою статью.Logical Properties and Values.

Подводя итог, помните:

• flex-direction: row

  • главная ось = встроенный размер
  • main-startв начале предложения в текущем режиме письма
  • Поперечная ось = измерение на уровне блока

• flex-direction: column

  • главная ось = размер блока
  • main-startВ начале элемента уровня блока в текущем режиме письма
  • поперечная ось = встроенный размер

выравнивание по умолчанию

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

Уведомление:Стоит отметить, что хотя эти свойства выравнивания начинаются со спецификации Flexbox, Box Alignment в конечном итоге переопределяет спецификацию Flexbox, напримерспецификация флексбоксаописан в.

Выравнивание шпинделя

justify-contentЗначение свойства по умолчанию равноflex-start, как пишет наш CSS:

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

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

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

justify-contentЕсть и другие значения:

• flex-end
• center
• space-around
• space-between
• space-evenly(добавлено при выравнивании на уровне блоков)

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

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

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: column with a height.

Выравнивание поперечной оси

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

HTML:

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">
    <ul>
    <li>Three: a</li>
    <li>Three: b</li>
    <li>Three: c</li>
    </ul>
    </div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Guide to Layout: clearfix.

Когда вы видите в гибком макете, есть свойство, котороеalign-В начале это выравнивание поперечной оси,align-itemsСвойство задает выравнивание подэлементов по поперечной оси Другие значения этого свойства включают в себя:

• flex-start
• flex-end
• center
• baseline

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

HTML:

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">
    <ul>
    <li>Three: a</li>
    <li>Three: b</li>
    <li>Three: c</li>
    </ul>
    </div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  align-items: flex-start;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: align-items: flex-start.

начальное значение гибких дочерних элементов

Наконец, здесь flex-элементы (flex-элементы) тоже имеют начальные значения, к ним относятся:

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

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

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

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

HTML:

<div class="container">
  <div class="item">Two words</div>
  <div class="item">Now three words</div>
  <div class="item">
    This flex item has a lot of content and so it is going to need more space in the flex container.
    </div>
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  width: 400px;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

См. Рэйчел Эндрю (@rachelandrew)существуетCodePenЭтот пример выше:Smashing Flexbox Series 1: initial values of flex items.

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

"Примечание: при распределении места для усадки оно основывается на умножении базового размера на коэффициент усадки при изгибе. Размер области сжатия задается подпунктомflex-shrinkпропорциональна размеру. Например, меньший подпроект не будет сжат до нуля, пока другие более крупные подпроекты не будут значительно уменьшены. 』

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

Другие элементы автоматически уменьшаются, чтобы освободить место для более крупного предмета (Large preview).

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

Суммировать

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

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

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

---

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.