Содержание

Не всё о Flexbox

Свойство display

Устанавливает отображение flexbox для дочерних элементов.

.container{

display:flex;

}

flex-direction

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

  • row (по умолчанию) слева направо
  • row-reverse справа налево
  • column сверху вниз
  • column-reverse снизу вверх

.container{

flex-direction:row| row-reverse| column| row| column-reverse;

}

justify-content

Устанавливает выравнивание дочерних элементов по горизонтали (если

flex-direction: row) или вертикали (если flex-direction: column).

  • flex-start (по умолчанию) выравнивание по левому краю
  • flex-end по правому краю
  • center по середине
  • space-between расширяет пространство между элементами так, чтобы первый элемент касался левого края, а последний – правого
  • space-around расстояние между элементами одинаково, а расстояние между крайними элементами и границами родителя равно половине расстояния между элементами
  • space-evenly расстояния между элементами и границами родителя равны

.container{

justify-content:flex-start| flex-end| center| space-between| space-around| space-evenly;

}

align-items

Устанавливает выравнивание дочерних элементов по вертикали (если flex-direction: row) или по горизонтали (если flex-direction: column).

  • stretch (по умолчанию) растянуть элементы так, чтобы заполнить родительский блок
  • flex-start выравнивание по верхнему краю
  • flex-end по нижнему краю
  • center по центру
  • baseline по первой строке текста

.container{

align-items:stretch| flex-start| flex-end| center| baseline;

}

flex-wrap

Разрешает перенос элементов на новую строку. По умолчанию перенос запрещён.

  • nowrap (по умолчанию) все элементы выстроены одной строкой
  • wrap элементы могут переноситься на следующую строку
  • wrap-reverse строки расположены в обратном порядке

.container{

flex-wrap:nowrap| wrap| wrap-reverse;

}

flex-flow

Сокращённая запись двух свойств flex-direction и flex-wrap. По умолчанию row nowrap

.container{

flex-flow:|| ;

}

align-content

Если дочерние элементы flexbox не помещаются в ширину блока и разрешён перенос элементов на новую строку (flex-wrap: wrap), то при помощи align-content можно настроить выравнивание этих строк.

Выравнивание может выполняться относительно горизонтали или вертикали в зависимости от значения свойства flex-direction.

  • stretch (по умолчанию) растягивает высоту строк настолько, чтобы заполнить блок
  • flex-start выравнивание относительно начала блока
  • flex-end относительно конца
  • center относительно центра
  • space-between первая строка в начале блока, последняя в конце. Расстояние между всеми строками равно
  • space-around аналогично space-between, но расстояние между первой строкой и началом блока и последней строкой и концом блока равно половине расстояния между строками

.container{

align-items:stretch| flex-start| flex-end| center| space-between| space-around;

}

Перенос на новую строку с помощью flexbox

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку?

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

Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим для четвертого элемента width 100%, он будет расположен в отдельной строке. Но что, если мы не хотим или не можем установить ширину отдельных элементов? Или есть ли способ просто указать flexbox разрыв строки в определенных точках?

Нет никакого свойства, которое мы могли бы установить для flex, чтобы оно переносило элементы на новую строку, но мы можем вставить перенос строки (вы можете представить это, как br) между двумя flex-элементами для достижения чего-то похожего:

/* Вставка разрыва строки между двумя flex-элементами заставит 
 * flex-элемент, который расположен после него переноситься на новую строку */
.break {
  flex-basis: 100%;
  height: 0;
}
<div>
  <div></div>
  <div></div> <!-- break -->
  <div></div>
</div>

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

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

.container {
  display: flex;
  flex-wrap: wrap;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

Вставка элемента разрыва

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

Давайте начнем с простого примера. Скажем, у нас есть два элемента, отображаемые рядом (они будут растягиваться с помощью flex-grow: 1, и для них не определены ни width, ни flex-basis):

Мы можем вставить элемент разрыва строки между элементами, чтобы они оба заняли 100% доступного пространства:

<div>...</div>
<div></div> <!-- перенос на новую строку -->
<div>...</div>

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

Как это работает? Так как мы указали, что .break должен занимать 100% ширины контейнера (потому что мы установили flex-basis: 100%), flex-элемент переноса должен размещаться в собственном ряду, чтобы достигнуть этого. Он не может размещаться в одном ряду с первым элементом, поэтому перейдет к новой строке, в результате чего первый элемент останется один в одной строке. Первый элемент будет растягиваться, чтобы заполнить оставшееся пространство (так как мы установили flex-grow: 1). Та же логика применима ко второму элементу.

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

<div>...</div>
<div>...</div>
<div>...</div>
<div></div> <!-- разрыв -->
<div>...</div>
<div></div> <!-- разрыв -->
<div>...</div>
<div>...</div>
<div>...</div>

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

Опять же, нам не нужно было указывать ширину ни для одного из этих элементов. Тот же самый метод будет работать для столбцов, если у нас есть гибкий контейнер с flex-direction: column, и установлено значение width 0 (вместо height) для элемента разрыва строки:

/* Используем столбец разрыва для переноса в новый столбец */
.break-column {
  flex-basis: 100%;
  width: 0;
}

Такой подход с использованием элементов разрыва для определения макета добавляет некоторое раздутие и шум в HTML, но он может быть мощным инструментом при правильном использовании. Мы можем, например, использовать его для верстки макета кладки с помощью чистого CSS и динамически размещать разрывы с помощью свойства order. Мы также можем перейти к новой строке, не изменяя ширину какого-либо элемента содержимого, и мы можем полагаться исключительно на распределение пространства в макете сетки с помощью flex-grow.

Предположим, что мы хотим создать этот макет:

И предположим, что мы хотим сделать это, задав разные значения flex-grow для распределения пространства (вместо использования flex-basis или width, которые вам придется пересчитывать, когда вы добавляете или удаляете элементы):

.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }
<div></div>
<div></div>
<div></div>

Если затем мы хотим добавить еще одну строку элементов ниже этой:

Мы не сможем сделать это, не устанавливая flex-basis или width, по крайней мере, для некоторых элементов (или не создавая вложенный макет flexbox с одним flex-элементом для каждой строки). Если все элементы имеют разные значения flex-grow, и ничто не заставляет их переноситься на новую строку, они все просто втиснутся в одну строку:

Неплохо. Однако, если мы вставим элемент разрыва строки, мы можем построить этот макет, распределяя все пространство с помощью flex-grow:

.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }
<div></div>
<div></div>
<div></div>
<div></div> <!-- разрыв -->
<div></div>
<div></div>

Это задает нужный макет, со всеми размерами, определенными пропорционально через flex-grow:

И если будет сценарий, когда нам нужно пять элементов в первой строке, нам не нужно менять какой-либо CSS-код, чтобы это заработало, мы можем просто добавить эти элементы до разрыва строки:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> <!-- разрыв -->
<div></div>
<div></div>

Все, что вам нужно добавить в CSS, чтобы использовать элементы разрыва строки — это эти два класса (единственное различие между этими двумя классами состоит в том, что для width (а не для height) необходимо установить 0, чтобы элемент разрывал столбец при использовании в макете столбцов):

/* Использование разрыва строки между двумя flex-элементами заставит 
 * flex-элемент, который расположен после него, перенестись в новую строку */
.break {
  flex-basis: 100%;
  height: 0;
}

/* Используем разрыв столбца, чтобы перенести элемент в новый столбец */
.break-column {
  flex-basis: 100%;
  width: 0;
}

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

Автор: Tobias Bjerrome Ahlin

Источник: https://tobiasahlin.com

Редакция: Команда webformyself.

Источник: https://webformyself.com/perenos-na-novuyu-stroku-s-pomoshhyu-flexbox/

Свойство flex-wrap — многострочная расстановка блоков по главной оси

Свойство flex-wrap задает многострочную расстановку блоков по главной оси.

Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow.

Синтаксис

селектор { flex-wrap: nowrap | wrap | wrap-reverse; }

Значения

ЗначениеОписание
nowrapОднострочный режим — блоки выстраиваются в одну строку.
wrapБлоки выстраиваются в несколько строк, если не помещаются в одну.
wrap-reverse То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый).

Значение по умолчанию: nowrap.

Пример . Значение wrap

Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение wrap-reverse

А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: wrap-reverse; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение nowrap

Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не 100px, как им задано, а меньше:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение nowrap

Однако, если блоки помещаются при заданной им ширине — то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:

<div> <div>1</div> <div>2</div> <div>3</div> </div> #parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Смотрите также

  • свойство flex-direction,
    которое задает направление осей flex блоков
  • свойство justify-content,
    которое задает выравнивание по главной оси
  • свойство align-items,
    которое задает выравнивание по поперечной оси
  • свойство flex-wrap,
    которое многострочность flex блоков
  • свойство flex-flow,
    сокращение для flex-direction и flex-wrap
  • свойство order,
    которое задает порядок flex блоков
  • свойство align-self,
    которое задает выравнивание одного блока
  • свойство flex-basis,
    которое задает размер конкретного flex блока
  • свойство flex-grow,
    которое задает жадность flex блоков
  • свойство flex-shrink,
    которое задает сжимаемость flex блоков
  • свойство flex,
    сокращение для flex-grow, flex-shrink и flex-basis

Перенос элементов в контейнере — CSS: Flex

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

See the Pen css_flex_wrap_no-wrap by Hexlet (@hexlet) on CodePen.

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

See the Pen css_flex_wrap_wrap by Hexlet (@hexlet) on CodePen.

Я добавил отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.

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

  • nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
  • wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.

See the Pen css_flex_wrap_wrap by Hexlet (@hexlet) on CodePen.

  • wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap

See the Pen css_flex_wrap_wrap-2 by Hexlet (@hexlet) on CodePen.

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

Документация

flexbox перенос на новую строку

На чтение 4 мин. Просмотров 67 Опубликовано

Свойство display

Устанавливает отображение flexbox для дочерних элементов.

flex-direction

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

  • row(по умолчанию) слева направо
  • row-reverse справа налево
  • column сверху вниз
  • column-reverse снизу вверх

justify-content

Устанавливает выравнивание дочерних элементов по горизонтали (если flex-direction: row) или вертикали (если flex-direction: column).

  • flex-start(по умолчанию) выравнивание по левому краю
  • flex-end по правому краю
  • center по середине
  • space-between расширяет пространство между элементами так, чтобы первый элемент касался левого края, а последний – правого
  • space-around расстояние между элементами одинаково, а расстояние между крайними элементами и границами родителя равно половине расстояния между элементами
  • space-evenly расстояния между элементами и границами родителя равны

align-items

Устанавливает выравнивание дочерних элементов по вертикали (если flex-direction: row) или по горизонтали (если flex-direction: column).

  • stretch(по умолчанию) растянуть элементы так, чтобы заполнить родительский блок
  • flex-start выравнивание по верхнему краю
  • flex-end по нижнему краю
  • center по центру
  • baseline по первой строке текста

flex-wrap

Разрешает перенос элементов на новую строку. По умолчанию перенос запрещён.

  • nowrap(по умолчанию) все элементы выстроены одной строкой
  • wrap элементы могут переноситься на следующую строку
  • wrap-reverse строки расположены в обратном порядке

flex-flow

Сокращённая запись двух свойств flex-direction и flex-wrap. По умолчанию row nowrap

align-content

Если дочерние элементы flexbox не помещаются в ширину блока и разрешён перенос элементов на новую строку (flex-wrap: wrap), то при помощи align-content можно настроить выравнивание этих строк.

Выравнивание может выполняться относительно горизонтали или вертикали в зависимости от значения свойства flex-direction.

  • stretch(по умолчанию) растягивает высоту строк настолько, чтобы заполнить блок
  • flex-start выравнивание относительно начала блока
  • flex-end относительно конца
  • center относительно центра
  • space-between первая строка в начале блока, последняя в конце. Расстояние между всеми строками равно
  • space-around аналогично space-between, но расстояние между первой строкой и началом блока и последней строкой и концом блока равно половине расстояния между строками

Дата публикации: 2019-05-29

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку?

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

Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим для четвертого элемента width 100%, он будет расположен в отдельной строке. Но что, если мы не хотим или не можем установить ширину отдельных элементов? Или есть ли способ просто указать flexbox разрыв строки в определенных точках?

Нет никакого свойства, которое мы могли бы установить для flex, чтобы оно переносило элементы на новую строку, но мы можем вставить перенос строки (вы можете представить это, как br) между двумя flex-элементами для достижения чего-то похожего:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Есть Flexbox сетка.

Как перенести .new-string на новую строку вместе с элементами, которые идут после него?

6 ответов 6

Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex .

Наиболее простое и надёжное решение — это вставка flex-элементов в правильных местах. Если они достаточно широкие ( width: 100% ), они будут создавать перенос строки.

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

Но есть ограничение: flex-контейнер может иметь только псевдоэлементы ::before и ::after . Это значит, что мы можем создать только 2 переноса строки.

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

Но, к счастью, спецификация CSS Display L3 ввела display: contents (в данный момент поддерживаемая только Firefox 37):

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

Поэтому вы можете применять display: contents к детям flex-контейнера и обернуть содержимое каждого внутрь дополнительного блок. Таким образом flex-элементы будут этими дополнительными обёртками и псевдоэлементами детей.

Кроме того, в соответствии с Fragmenting Flex Layout и CSS Fragmentation, flexbox позволяет принудительные переносы с помощью break-before , break-after или их псевдонимов в CSS 2.1:

Принудительные переносы строк во flexbox ещё широко не поддерживаются, но они работают в Firefox.

Flexbox

Flexbox представляет собой следующую модель.

Имеется контейнер с элементами.

Элементы размещаются в определённом направлении.

Есть две оси направления — основная и поперечная.

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

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

Инициализация флексбокса: display: flex

Минимальный пример использования Flexbox.


<style>
.flex-container {
  display: flex;
}
</style>

<div>  
  <div></div>
  <div></div>
</div>

1

2

3. Высота не указана

У контейнера указали display: flex, а внутри контейнера разместили два элемента.

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

Главная ось: flex-direction

Вместо направлений «влево» и «вправо» во флексбоксе используется понятие «главная ось». Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.

Элементы по умолчанию размещаются слева направо. Этому направлению соответствует правило row. Можно изменить направление справа налево через row-reverse.


.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Также доступны значения column и column-reverse для размещения элементов сверху вниз и снизу вверх.

Сверху вниз — flex-direction: column.

Снизу вверх — flex-direction: column-reverse.

Выравнивание

Выравниваем элементы внутри контейнера. Возьмём наглядный пример, когда мы развернули направление и элементы разместились у правого края. А мы хотим их прижать к левому краю. Для этого используется justify-content.


.flex-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Доступны значения flex-start, flex-end, center, space-between, space-around и stretch (по умолчанию).

Аналогично можно выравнивать относительно поперечной оси через align-items с такими же названиями.


.flex-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

Для выравнивание отдельного элемента используется align-self к самому элементу.


.flex-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.flex-item {
    align-self: flex-end;
}

Перенос

По умолчанию элементы в контейнере не переносятся, а сжимаются в размерах, чтобы уместиться в отведённом им месте. Можно переопределить это поведение и разрешить перенос на следующий ряд или столбец через flex-wrap: wrap.


.flex-container {
    display: flex;
    flex-wrap: wrap;
}

Можно изменить направление переноса flex-wrap: wrap-reverse.

Также доступны следующие возможности.


.flex-container {
  display: flex;
}
.flex-item.nth-of-type(1){
  flex-grow: 1;
}
.flex-item.nth-of-type(2) {
  flex-grow: 2;
}


.flex-container {
  display: flex;
}
.flex-item:nth-of-type(1) {
  flex-shrink: 1;
}
.flex-item:nth-of-type(2) {
  flex-shrink: 2;
}


.flex-container {
  display: flex;
}
.flex-item.nth-of-type(1) {
  flex-basis: 200px;
}
.flex-item.nth-of-type(2) {
  flex-basis: 10%;
}


.flex-container {
  display: flex;
}
.flex-item:nth-of-type(1) {
  flex: 1 0 100px;
}
.flex-item:nth-of-type(2) {
  flex: 2 0 10%;
}
Реклама

css — Flexbox — сначала перенести центральный элемент на новую строку

Я использую Flex Box для создания традиционного списка плавающих элементов. У меня есть три элемента со следующей структурой:

<section>
    <div>
        item one
    </div>
    <div>
        item two
    </div>
    <div>
        item three
    </div>
</section>

С помощью CSS:

section{
    display: flex;
    flex-wrap: wrap;
}
div{
    width: 33%;
    min-width: 200px;
    border: 1px solid black;
}

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

Есть ли способ настроить Flex Box так, чтобы item two всегда падал первым?

JSFiddle

4

Lloyd Banks 7 Дек 2016 в 18:56

2 ответа

Лучший ответ

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

пересмотренная скрипка

section {
  display: flex;
}
div {
  width: 33%;
  min-width: 200px;
  border: 1px solid black;
}
@media (max-width: 600px) {
  section { flex-wrap: wrap; }
  div:nth-child(2) { order: 1; }
}
<section>
  <div>item one</div>
  <div>item two</div>
  <div>item three</div>
</section>

Из спецификации:

5.4. Порядок отображения: свойство order

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

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

Начальное значение order для всех гибких элементов равно 0.

4

Michael Benjamin 30 Июн 2017 в 16:07

<section>
<div>
    item one
</div>
<div>
    item two
</div>
<div>
    item three
</div>
</section>
 section{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse; 
 }
 div{
     width: 33%;
    min-width: 200px;
     border: 1px solid black;

Другие примеры можно найти с использованием @media (max-width: 600px) {пример а также пример 2 и пример 3 и пример 4 и exmple 5 и пример 6

0

D V Yogesh 7 Дек 2016 в 16:19

Переход к новому ряду с помощью flexbox

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

Распространенным способом управления расположением и размером гибких элементов является использование ширины или гибкой основы ; если мы установим ширину четвертого элемента равной 100%, он будет помещен в отдельную строку.Но что, если мы не хотим или не можем устанавливать ширину отдельных элементов, действительно ли это нужно? Или есть способ просто указать flexbox на разрыв строки в определенных точках?

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

  / * Вставка этой свернутой строки между двумя гибкими элементами сделает
 * гибкий элемент, который появляется после того, как он переходит в новую строку * /
.сломать {
  флекс-основа: 100%;
  высота: 0;
}

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

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

 .container {
  дисплей: гибкий;
  flex-wrap: обертка;
}
  
  

  
 

  
 

  
 

  ...

Вставка гибкого элемента с разрывом строки

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

Начнем с простого примера.Скажем, у нас есть два элемента, показанные рядом (они настроены на рост с flex-grow: 1 , и у них нет определенной ширины или flex-base ):

Мы можем вставить элемент разрыва строки между элементами, чтобы они оба занимали 100% доступного пространства:

  
 ... 


 
 

 ...

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

Как это работает? Поскольку мы сказали, что .break должен занимать 100% ширины контейнера (потому что мы установили flex-base: 100% ), ломающийся гибкий элемент должен располагаться в отдельной строке для этого. Он не может разделить строку с первым элементом, поэтому он перейдет в новую строку, в результате чего первый элемент останется в одной строке. Затем первый элемент будет расти, чтобы заполнить оставшееся пространство (поскольку мы установили flex-grow: 1 ).Та же логика применима и ко второму элементу.

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

  
 ... 


 ... 


 ... 


 
 

 ... 


 
 

 ... 


 ... 


 ...

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

Опять же, нам не нужно было указывать ширину ни для одного из этих элементов. Тот же метод будет работать для столбцов, если у нас есть гибкий контейнер с flex-direction: column , и установите ширину (вместо высоты ) на 0 для нашего разрушающего элемента:

  / * Использовать свернутый столбец для перехода на новый столбец * /
.break-column {
  флекс-основа: 100%;
  ширина: 0;
}

Такой подход с использованием элементов разрыва строки для определения макета определенно добавляет некоторого раздувания и шума в наш HTML, но при правильном использовании он может быть мощным инструментом.Мы можем, например, использовать его для создания макета кладки только с помощью CSS и динамически позиционировать разрывы с помощью свойства order . Мы также можем перейти к новой строке без изменения ширины любого элемента содержимого, и мы можем полагаться исключительно на flex-grow для распределения пространства в макете сетки.

Предположим, мы хотим создать этот макет:

И предположим, что мы хотим сделать это, установив разные значения flex-grow для распределения пространства (вместо использования flex-base или width , которые вам придется пересчитать, как только вы добавите или удаленные элементы):

 .элемент {flex-grow: 1; }
.item-wide {flex-grow: 3; }

Если мы хотим добавить еще одну строку элементов ниже этой строки:

Мы не смогли бы сделать это, не прибегая к установке flex-base или ширины по крайней мере для некоторых элементов (или создания вложенного макета flexbox с одним гибким элементом для каждой строки). Если бы все элементы имели разные значения flex-grow , ничто не заставило бы их перейти в новую строку, все они просто втиснулись бы в одну строку вместе:

Уютно, но не то, что нам нужно.Однако, если мы вставим ломающийся элемент, мы можем построить этот макет, распределив все пространство с помощью flex-grow :

  .item {flex-grow: 1; }
.item-wide {flex-grow: 3; }

Получение желаемого макета со всеми размерами, определенными пропорционально с помощью flex-grow :

И если есть сценарий, когда нам нужно пять элементов в первой строке, нам не нужно изменять какой-либо CSS, чтобы это работало, мы можем просто добавить эти элементы перед разрывом строки:

Все, что вам нужно добавить в свой CSS для использования элементов разрыва строки, — это эти два класса (единственное различие между этими двумя классами состоит в том, что ширина (а не высота ) должна быть установлена ​​на 0 для элемент для сворачивания при использовании в макете столбца):

  / * Вставка свернутой строки между двумя гибкими элементами сделает
 * гибкий элемент, который появляется после того, как он переходит в новую строку * /
.сломать {
  флекс-основа: 100%;
  высота: 0;
}

/ * Используйте свернутый столбец для перехода к новому столбцу * /
.break-column {
  флекс-основа: 100%;
  ширина: 0;
}

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

html — Как разбить строку внутри Flexbox?

html — Как разбить строку внутри Flexbox? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 6к раз

На этот вопрос уже есть ответы :

Закрыт 4 месяца назад.

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

  .container {
  ширина: 80%;
  дисплей: гибкий;
  flex-direction: ряд;
  justify-content: center;
}

.sizethis {
  ширина: 60%;
  маржа: 0 40px;
}

.коробка {
  ширина: 23%;
  маржа: 1%;
  высота: 180 пикселей;
  граница: сплошная 1px # c4c4c4;
  дисплей: встроенный гибкий;
  align-items: center;
  justify-content: center;
}  
  

  

    

       
      
 Пункт номер один

Создан 11 июл.

Андре Оливейра

1,935 золотых знаков2020 серебряных знаков4949 бронзовых знаков

4

Попробуй добавить в свой ‘.box ‘класс:

  flex-direction: столбец;
вертикальное выравнивание: сверху;

Похоже, это может решить вашу проблему.

https://jsfiddle.net/85L0sd9o/