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

Как осуществить с помощью 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

css — Перенос текста в ie для flex-элементов не работает

Stack Overflow на русском

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

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

Реклама

webmaster.alexanderklimov.ru

flex-wrap | CSS | WebReference

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

Краткая информация

Значение по умолчанию	nowrap
Наследуется	Нет
Применяется	К флекс-контейнеру
Анимируется	Нет

Синтаксис ?

flex-wrap: nowrap | wrap | wrap-reverse

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

nowrap

Флексы выстраиваются в одну линию.

wrap

Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.

wrap-reverse

Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

Пример

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>flex-wrap</title>
  <style>
   .flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
   }
   .flex-item {
    padding: 20px;
    background: #f0f0f0;
    border-radius: 5px;
    margin: 1rem;
    text-align: center; 
   }
  </style>
 </head> 
 <body> 
  <ul>
   <li><img src="image/aquaria1.jpg" alt=""></li>
   <li><img src="image/aquaria2.jpg" alt=""></li>
   <li><img src="image/aquaria3.jpg" alt=""></li>
  </ul>
 </body> 
</html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-wrap.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 15.05.2018

Редакторы: Влад Мержевич

webref.ru

Как в display:flex перенести последний элемент на другую строку?, вопрос №891595 — КодИндекс

Как например:

.footer_contacts {
  background: #27365d;
  color:#fff;
}

.contacts_val {
  white-space:nowrap;
}

  <link rel="stylesheet" href="https://codeindex.ru/go/go_redirect?url=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css">

<div>
  <div>
    <div>      
        
        <div>
          <div>
            <img src="https://dummyimage.com/100x100/ccc/fff&text=img" alt="">
          </div>
        </div>
        
        <div>

          <div>
            
            <div>
              <div>
                <div>
                  <img src="https://dummyimage.com/20x20/ccc/fff&text=img" alt="">
                </div>
                <div>
                  +7(812)509-61-36
                </div>
              </div>
            </div>

            <div>
              <div>
                <div>
                  <img src="https://dummyimage.com/20x20/ccc/fff&text=img" alt="">
                </div>
                <div>
                  [email protected]
                </div>
              </div>
            </div>
            
            <div>
              <div>
                <div>
                  <img src="https://dummyimage.com/20x20/ccc/fff&text=img" alt="">
                </div>
                <div>
                  www.spb-chongqing.com
                </div>
              </div>
            </div>
            
          </div>
          
        </div>
      
    </div>
  </div>
</div>

Но если Вы хотите именно для своего примера, то помимо d-flex нужно задать flex-wrap док. разрешает перенос блоков, если они не вмещаются по ширине. Для планшетов или любого другого разрешения задаются префиксы .flex-sm-wrap, .flex-md-wrap, .flex-lg-wrap.

• 11 янв 2018 2018-01-11 07:21:23
• HamSter

codeindex.ru