Thuộc tính min-inline-size CSS

Định nghĩa và cách sử dụng

min-inline-size Thuộc tính xác định kích thước tối thiểu của yếu tố theo hướng ngang trong dòng.

Nếu kích thước nội dung nhỏ hơn kích thước nhỏ nhất trong hướng trong dòng, thì sẽ áp dụng min-inline-size Giá trị thuộc tính.

Nếu kích thước nội dung lớn hơn kích thước nhỏ nhất trong hướng trong dòng, thì min-inline-size Giá trị thuộc tính không hoạt động.

Lưu ý:Các thuộc tính CSS liên quan writing-mode Định nghĩa hướng trong dòng, điều này sẽ ảnh hưởng đến min-inline-size Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là xuống và hướng trong dòng là từ trái sang phải.

CSS min-inline-size Thuộc tính tương ứng với thuộc tính CSS min-height và min-width Rất相似 nhưng min-inline-size Thuộc tính này phụ thuộc vào hướng trong dòng.

Mô hình

ví dụ 1

Đặt kích thước nhỏ nhất trong hướng trong dòng của phần tử <div> là 200 pixel:

div {
  min-inline-size: 200px;
}

Thử nghiệm trực tiếp

ví dụ 2: Chế độ viết

Đặt hướng trong dòng của phần tử <div> là writing-mode Khi thuộc tính writing-mode được đặt là vertical-rl, hướng trong dòng sẽ từ ngang sang dọc, điều này sẽ ảnh hưởng đến cách thuộc tính min-inline-size hoạt động:

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

Thử nghiệm trực tiếp

ví dụ 3: min-inline-size và inline-size

Xem một inline-size cho phần tử <div> với kích thước 200px và một phần tử khác min-inline-size Xem cách các phần tử <div> với kích thước 200px khác nhau trong khi kích thước nội dung thay đổi:

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

Thử nghiệm trực tiếp

Ngôn ngữ CSS

min-inline-size: auto|length|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Trang liên quan

Tham khảo：Thuộc tính CSS inline-size

Tham khảo：Thuộc tính max-inline-size CSS

Tham khảo：Thuộc tính min-height CSS

Tham khảo：Thuộc tính min-width CSS

Tham khảo：Thuộc tính writing-mode trong CSS