"br" nie jest przyjazny dla flexbox?

Question

Dostałem stolik przy użyciu flexbox i zauważyłem jedną interesującą cechę: element br nie może nic zrobić wewnątrz flexbox.

przykład:

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

<p>Line break using div:</p> 
 
<div class="flexbox"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="new-row"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 

 
<p>Line break using br:</p> 
 
<div class="flexbox"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <br> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

W przykładzie div i br mają takie same właściwości, ale div przenosi elementy do nowej linii, a br nie.

Dlaczego?

Answer 1

Implementacja elementu br w CSS jest bardzo dobrze znana jako dość tajemnicza. Różne przeglądarki obsługują inny zestaw właściwości elementu, z różnym natężeniem efektu (chociaż wszystkie z nich obsługują ustawienie display: none, aby usunąć je przynajmniej z układu). CSS sam przyznaje się do tej dziwności już w CSS1, mając dedykowane an entire subsection to it, a nawet teraz w CSS3 nadal jest mocno niedookreślony.

Ta szczególna cecha flexbox nie jest nowa; był znany since 2014. Zasadniczo w obecnych implementacjach br nie generuje głównej skrzynki, ale jest traktowane jako część ciągłego przebiegu tekstu opisanego w section 4 of the Flexbox spec, generując anonimowy element elastyczny , który nie może być oznaczony jako (ponieważ jest anonimowy). Jest to podobne do osieroconego elementu display: table-cell, który powoduje utworzenie anonimowego pola tabeli wokół niego, z tym że możesz przynajmniej nadal stylizować element display: table-cell - w przypadku elementu br właściwości stylu, które zastosujesz, nie mają żadnego efektu, a anonimowy pozycja flex jest określona z wartościami domyślnymi.

W tym przypadku, ponieważ sama nazwa br jest (w większości) pusta i nie towarzyszy jej żaden inny pusty tekst w pojemniku elastycznym, skutkuje to anonimowym elementem flex bez żadnych wymiarów, co sprawia, że ​​wygląda tak, jakby br element zniknął całkowicie.

W tym roku "tajemnica" nie polega na zmianie specyfikacji Flexbox, ale po prostu na dodaniu specjalnej definicji elementu css-display-3, aby uwzględnić zachowanie widoczne tutaj. Ale taka definicja nie istnieje w current version tej specyfikacji, ani w FPWD (która została opublikowana po rozdzielczości), specyfikacji HTML ani nigdzie indziej. Niemniej jednak definicja wygląda to z punktu widzenia bieżącej css-display-3 spec (który nie określa żadnych nowych właściwości, po prostu zmienia definicję display):

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

... co oznacza, że ​​br element doesn't generate a principal box, ale po prostu anonimowe pole liniowe zawierające pojedynczy znak nowej linii.

Ponieważ tej definicji nadal brakuje w css-display-3, nie od razu bym ją teraz uznał. Mimo to zachowanie, które tu widzimy, jest bardzo mało prawdopodobne, ponieważ tak długo trwało działanie elementu br.