Ngăn các chi tiết flex từ duỗi

Question

mẫu:

div { 
 
    display: flex; 
 
    height: 200px; 
 
    background: tan; 
 
} 
 
span { 
 
    background: red; 
 
}

<div> 
 
    <span>This is some text.</span> 
 
</div>

Tôi có hai câu hỏi, xin vui lòng:

1. Tại sao nó về cơ bản xảy ra với span?
2. Cách tiếp cận đúng để ngăn không cho nó kéo dài mà không ảnh hưởng đến các mặt hàng flex khác trong thùng chứa flex là gì?

Answer 1

Bạn không muốn kéo dài nhịp trong chiều cao?
Bạn có khả năng ảnh hưởng đến một hoặc nhiều mục flex để không kéo dài chiều cao đầy đủ của vật chứa.

Để ảnh hưởng đến tất cả flex-mục của container, chọn này:
Bạn phải thiết lập align-items: flex-start;-div và tất cả flex-mục của container này có được chiều cao của nội dung của họ.

div { 
 
    align-items: flex-start; 
 
    background: tan; 
 
    display: flex; 
 
    height: 200px; 
 
} 
 
span { 
 
    background: red; 
 
}

<div> 
 
    <span>This is some text.</span> 
 
</div>

Để chỉ ảnh hưởng đến một đơn flex-mục, chọn này:
Nếu bạn muốn unstretch một đơn flex-item trên thùng sơn, bạn phải thiết lập align-self: flex-start; với mặt hàng flex này. Tất cả các mặt hàng flex khác của thùng chứa không bị ảnh hưởng.

div { 
 
    display: flex; 
 
    height: 200px; 
 
    background: tan; 
 
} 
 
span.only { 
 
    background: red; 
 
    align-self:flex-start; 
 
} 
 
span { 
 
    background:green; 
 
}

<div> 
 
    <span class="only">This is some text.</span> 
 
    <span>This is more text.</span> 
 
</div>

Tại sao điều này xảy ra với span?
Giá trị mặc định của thuộc tính align-items là stretch. Đây là lý do tại sao các span điền vào chiều cao của div.

Sự khác biệt giữa baseline và flex-start?
Nếu bạn có một số văn bản trên các mặt hàng flex, với kích thước phông chữ khác nhau, bạn có thể sử dụng đường cơ sở của dòng đầu tiên để đặt flex-mục theo chiều dọc. Một mặt hàng flex với kích thước phông chữ nhỏ hơn có một số khoảng trống giữa vùng chứa và chính nó ở trên cùng. Với flex-start mặt hàng flex sẽ được đặt ở đầu thùng chứa (không có khoảng trống).

div { 
 
    align-items: baseline; 
 
    background: tan; 
 
    display: flex; 
 
    height: 200px; 
 
} 
 
span { 
 
    background: red; 
 
} 
 
span.fontsize { 
 
    font-size:2em; 
 
}

<div> 
 
    <span class="fontsize">This is some text.</span> 
 
    <span>This is more text.</span> 
 
</div>