"br" không thân thiện với flexbox?

Question

Tôi đã có một bảng sử dụng flexbox và nhận thấy một tính năng thú vị: các yếu tố br không thể làm bất cứ điều gì bên trong flexbox.

Ví dụ:

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

Trong ví dụ này, div và br phần các thuộc tính giống nhau, nhưng div chuyển các yếu tố để các dòng sản phẩm mới, và br không.

Tại sao?

Answer 1

Việc triển khai phần tử br trong CSS rất nổi tiếng là điều bí ẩn. Các trình duyệt khác nhau hỗ trợ một bộ thuộc tính khác nhau trên phần tử, với các mức độ hiệu ứng khác nhau (mặc dù tất cả chúng đều hỗ trợ thiết lập display: none để loại bỏ nó khỏi bố cục ít nhất). Bản thân CSS thừa nhận sự kỳ quặc này sớm nhất là CSS1, có an entire subsection to it chuyên dụng, và thậm chí bây giờ trong CSS3 nó vẫn còn thiếu nghiêm trọng.

Tính riêng biệt này liên quan đến flexbox không phải là mới; nó đã được biết đến since 2014. Về cơ bản, trong triển khai hiện tại, br không tạo ra hộp chính, thay vào đó được coi là một phần của văn bản liền kề như được mô tả trong section 4 of the Flexbox spec, tạo một mục ẩn danh không thể được tạo kiểu (vì ẩn danh). Điều này tương tự như phần tử display: table-cell mồ côi gây ra một hộp bảng ẩn danh được tạo xung quanh nó, ngoại trừ bạn ít nhất vẫn có thể tạo thành phần tử display: table-cell - trong trường hợp của phần tử br, các thuộc tính kiểu bạn áp dụng không có hiệu lực và flex mục được đặt ra với các giá trị mặc định.

Trong trường hợp này, kể từ br chính nó là (chủ yếu) trống và không được đi kèm với bất kỳ văn bản trống nào khác trong thùng chứa flex, điều này dẫn đến một mặt hàng ẩn danh không có kích thước, làm cho nó có vẻ như là br yếu tố đã biến mất hoàn toàn.

Quay lại năm 2014 CSSWG resolved "bí ẩn" này không phải bằng cách thay đổi thông số Flexbox, mà chỉ cần thêm định nghĩa đặc biệt cho phần tử br vào css-display-3 để xem hành vi được thấy ở đây. Nhưng không có định nghĩa như vậy tồn tại trong các current version của spec đó, cũng không phải FPWD (được xuất bản sau khi độ phân giải!), Cũng không phải là spec HTML, cũng không phải bất cứ nơi nào khác. Tuy nhiên, định nghĩa như sau về dòng css-display-3 spec (mà không xác định bất kỳ đặc tính mới, chỉ cần thay đổi định nghĩa của display):

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

... có nghĩa là br phần tử doesn't generate a principal box, nhưng chỉ đơn giản là một hộp nội tuyến ẩn danh có chứa một dòng đơn mới.

Vì định nghĩa này vẫn bị thiếu trong css-display-3, tôi sẽ không ngay lập tức coi nó là canon. Mặc dù vậy, các hành vi nhìn thấy ở đây là rất khó có thể thay đổi xem xét đây là cách các yếu tố br đã được quá lâu.