Br не дружит с flexbox?

#css #flexbox

Верстал таблицу с помощью flexbox и заметил одну интересную особенность - элемент
br ничего не может внутри flexbox.

Пример:



.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
  padding: 2px;
}
.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid blue;
}

.new-row, br {
  display: block;
  width: 100%;
  height: 0px;
}
Перенос с помощью div'a:

  

  

  

  

  



Перенос с помощью br:

  

  

  

  

  






В примере у div'а и br одни и те же свойства, но div переносит на новую строку элементы,
а br - нет.

Почему?
    

Ответы

Ответ 1

Таки переносит:



.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
  padding: 2px;
}
.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid blue;
}

.new-row, br {
  display: block;
  width: 100%;
  height: 0px;
}

br {
  content:'ПОЖАЛУЙСТА, ПЕРЕНЕСИ НА ДРУГУЮ СТРОКУ!';
}
Перенос с помощью div'a:

  

  

  

  

  



Перенос с помощью br:


  

  

  

  




Ответ 2

Реализация элемента br в CSS очень хорошо известна как тайна. Различные браузеры
поддерживают различные свойства для этого элемента, с разным эффектом (хотя все они
поддерживают display: none, чтобы удалить br из макета). Сам CSS признает эту странность
еще в CSS1, выделив для неё целый подраздел, и даже сейчас в CSS3 он по-прежнему указан.

Эта особенность flexbox не новая; про неё было известно с 2014 года. В основном,
в текущих реализациях, br не создаёт основной блок, а вместо этого рассматривается
как часть непрерывного текста, как описано в разделе 4 спецификации Flexbox, создавая
невидимый элемент, который не может быть стилизован (потому что он невидимый). Это
похоже на элемент display: table-cell, вызывающий создание вокруг себя анонимной таблицы,
не смотря на то, что вы можете по-прежнему стилизовать элемент display: table-cell
- в случае br элемент. Свойства стиля, которые вы применяете, не имеют эффекта, а настройки
невидимого элемент выставляются по-умолчанию.

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

Еще в 2014 году CSSWG эта тайна была решена не путем изменения спецификации Flexbox,
а просто добавлением специального определения br для css-display-3 для учета поведения,
которое мы наблюдаем. Но такое определение не существует в текущей версии спецификации,
а также FPWD (который был опубликован после резолюции!), ни HTML-спецификации, ни где-либо
еще. Тем не менее, определение выглядит так, как в текущей спецификации css-display-3
(которая не определяет никаких новых свойств, а просто изменяет определение display):

br {
  content: '\A';
  display: contents;
  white-space: pre;
}


...что означает, что элемент br не создаёт основной блок, а просто невидимый встроенный
блок, содержащий одну новую строку.

Поскольку это определение по-прежнему отсутствует в css-display-3, я бы пока ещё
не стал рассматривать его.  

Ответ участника @BoltClock


Ответ 3

Тег br не имеет своей ширины и высоты, а после применения свойства flex он встал
в ряд с остальными. В первом примере вы растягиваете блок на всю ширину, что позволяет
занять ей всю строку. С br такой трюк не получится