Display flex перенос на другую строку – html — Flexbox item — перенос на новую строку

Как осуществить с помощью flexbox перенос на новую строку: позиционирование элементов

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

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

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

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

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

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

Узнать подробнее

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

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

<div> <div></div> <div></div> <!— break —> <div></div> </div>

<div>   <div></div>   <div></div> <!— break —>   <div></div> </div>

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

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

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

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

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

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

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

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

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

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

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

<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>

<div>…</div> <div>…</div> <div>…</div> <div></div> <!— разрыв —> <div>…</div> <div></div> <!— разрыв —> <div>…</div> <div>…</div> <div>…</div>

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

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

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

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

Узнать подробнее

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

/* Используем столбец разрыва для переноса в новый столбец */ .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; }

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

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

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

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

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

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

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

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

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

<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>

<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; }

/* Использование разрыва строки между двумя 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.

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

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

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

webformyself.com

html — Перенос элементов flexbox на другую строку

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow

ru.stackoverflow.com

html — Перенос элементов flexbox на другую строку

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

7. текущее сообщество

ru.stackoverflow.com

Перенос на новую строку с помощью 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.

prog-help.ru

html — как отпозиционировать такое?как вообще перенести флекс элементы на новую строку?

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти

ru.stackoverflow.com

Не всё о 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;

}

www.csscolor.ru

html — как отпозиционировать такое?как вообще перенести флекс элементы на новую строку?

Stack Overflow на русском

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

7. текущее сообщество

   • Stack Overflow на русском справка чат

ru.stackoverflow.com