Как указать разрывы строк в многострочном макете flexbox?

Ответ 1

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

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

Ответ 2

С моей точки зрения, более смыслово использовать элементы <hr> как разрывы строк между элементами flex.

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

.container hr {
  width: 100%;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...
</div>

Ответ 3

@Oriol имеет отличный ответ, к сожалению, по состоянию на октябрь 2017 года, ни display:contents, ни page-break-after широко поддерживается, лучше сказано об Firefox, который поддерживает это, но не других игроков, я придумал следующее "взломать", который я считаю лучше, чем жесткое кодирование в перерыве после каждого третьего элемента, потому что это сделает очень трудным сделать страницу мобильной.

Как сказано, взлом и недостаток в том, что вам нужно добавить немало лишних элементов для ничего, но он делает трюк и работает в браузере даже в датированном IE11.

"hack" - это просто добавить дополнительный элемент после каждого div, который установлен в display:none, а затем использовать css nth-child, чтобы решить, какой из них должен быть фактически видимым, заставляя линейный тормоз как это

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n-1) {
  background: silver;
}
.breaker {display:none;}
.breaker:nth-child(3n) {
  display:block;
  width:100%;
  height:0;
 }

<div class="container">
  <div class="item">1</div><p class=breaker></p>
  <div class="item">2</div><p class=breaker></p>
  <div class="item">3</div><p class=breaker></p>
  <div class="item">4</div><p class=breaker></p>
  <div class="item">5</div><p class=breaker></p>
  <div class="item">6</div><p class=breaker></p>
  <div class="item">7</div><p class=breaker></p>
  <div class="item">8</div><p class=breaker></p>
  <div class="item">9</div><p class=breaker></p>
  <div class="item">10</div><p class=breaker></p>
</div>

Ответ 4

Вы хотите семантический перенос строки?

Тогда рассмотрите возможность использования <br>. W3Schools может предложить вам, что BR предназначен только для написания стихов (мой скоро появится), но вы можете изменить стиль, чтобы он действовал как блочный элемент шириной 100%, который переместит ваш контент на следующую строку. Если 'br' предлагает перерыв, то мне кажется, что это более уместно, чем использование hr или 100% div и делает html более читабельным.

Вставьте <br> где вам нужно переносы строк и стиль это нравится.

 // Use '>' to avoid styling '<br>' inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }

Вы можете отключить <br> с запросами средств массовой информации, путем установки display: для block или none в зависимости от обстоятельств (я включил пример этого, но не оставил его закомментирован).

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

И вы можете поставить столько, сколько хотите, с разными классами или именами :-)

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <br class="linebreak1"/>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Ответ 5

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

наценка

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

Создайте файл grid.css:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

Я создал пример (jsfiddle)

Попробуйте изменить размер окна до 400px, это быстро!

Ответ 6

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

В случае примера это можно сделать с помощью calc(), просто добавляя margin-left и margin-right к элементу 3n + 2 (2, 5, 8)

.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

Пример сниппета

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Ответ 7

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

Вот пример, который я сделал.

.grid {
  display: inline-block;
}

.cell {
  display: inline-block;
  position: relative;
  float: left;
  margin: 8px;
  width: 48px;
  height: 48px;
  background-color: #bdbdbd;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-indent: 4px;
  color: #fff;
}

.cell:nth-child(3n) + .cell {
  clear: both;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
</div>

Ответ 8

Я попробовал несколько ответов здесь, и ни один из них не сработал. По иронии судьбы, то, что сработало, было о самой простой альтернативе <br/>, которую можно было попробовать:

<div style="flex-basis: 100%;"></div>

или вы также можете сделать:

<div style="width: 100%;"></div>

Поместите это, где вы хотите новую строку. Кажется, он работает даже со смежными <span>, но я использую его со смежными <div>.

Ответ 9

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}

<div class="container">
  <div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
  <div class="item">10</div>
</div>