"br"はフレックスボックスに馴染んでいませんか？

Question

フレックスボックスを使ってテーブルを取得しましたが、興味深い機能が1つあります。br要素はフレックスボックス内で何もできません。

例：例で

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

、divとbrは、同じ特性を共有するが、新しい行にdiv転送要素、及びbrはありません。

なぜですか？

Answer 1

CSSのbr要素の実装は、非常に謎であることが非常によく知られています。異なるブラウザーは、要素のさまざまなセットをさまざまな程度のエフェクトにサポートします（少なくともレイアウトから削除するには、すべてdisplay: noneをサポートします）。 CSS自体はCSS1と同じくらい早い時期にこの奇妙なことを認めており、an entire subsection to itという専用フォントを持っています。そして今でもCSS3ではそれほど厳密には指定されていません。

このようなフレックスボックスの特質は新しいものではありません。 since 2014が知られている。基本的に現在の実装ではbrはプリンシパルボックスを生成しませんが、代わりにsection 4 of the Flexbox specで説明されているように連続したテキストの一部として扱われ、匿名のためという匿名のフレックスアイテムが生成されます。これは孤立したdisplay: table-cell要素に似ていますので、少なくともdisplay: table-cell要素のスタイルを変更することができますが、br要素の場合は、適用するスタイルプロパティは効果がなく、匿名フレックスアイテムはデフォルトでレイアウトされています。この場合

、br自体が（主に）空であり、それはフレックスコンテナ内の他の裸のテキストを伴うされていない、これはそれがbrかのように見える作り、無寸法の匿名フレックス項目になるため要素が完全に消えた。

CSSWG resolvedこの「謎」は、Flexboxの仕様を変更するのではなく、br要素の特別な定義をcss-display-3に追加してここに見られる動作を説明するだけです。しかしそのような定義は、その仕様のcurrent versionにも、FPWD（の後にに公開されました！）やHTML仕様や他のどこにも存在しません。

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

... brことを意味します。それにも関わらず、定義は（ちょうどdisplayの定義を変更し、任意の新しいプロパティを定義しない）現在のCSS-表示-3仕様の面で次のようになります要素doesn't generate a principal boxではなく、単なる改行を含む匿名のインラインボックスです。

この定義はまだcss-display-3にはないので、すぐにcanonとはすぐには考えません。たとえそうであっても、ここに見られる振る舞いは、これが非常に長い間されてきたことを考えると、変わることはほとんどありません。