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

Trang trước max-height
Trang tiếp theo max-width

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

max-inline-size Thuộc tính này chỉ định kích thước lớn nhất của phần tử trong hướng in-line.

Nếu kích thước nội dung nhỏ hơn kích thước lớn nhất trong hướng in-line, thì max-inline-size Giá trị thuộc tính không có hiệu lực.

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

Lưu ý:Các thuộc tính CSS liên quan writing-mode Định nghĩa hướng in-line, điều này sẽ ảnh hưởng đến max-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, hướng in-line là từ trái sang phải.

CSS max-inline-size Thuộc tính này với thuộc tính CSS max-height và max-width Rất相似, nhưng max-inline-size Thuộc tính này phụ thuộc vào hướng in-line.

Mô hình

Ví dụ 1

Đặt kích thước lớn nhất của hướng in-line của phần tử <div> thành 60 pixel:

div {
  max-inline-size: 60px;
}

Thử nghiệm ngay

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

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

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Thử nghiệm ngay

Ví dụ 3: Max-inline-size vs Inline-size

Giám sát một phần tử <div> (inline-size (100px) và một phần tử <div> khác (max-inline-size Phản ứng khác nhau khi kích thước nội dung thay đổi (100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Thử nghiệm ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
auto	Mặc định. Giá trị mặc định của max-inline-size của phần tử.
length	Sử dụng các đơn vị như px, pt, cm. Xem thêm:Đơn vị CSS.
%	Định nghĩa phần trăm kích thước tương đối với trục của phần tử cha.
initial	Đặt thuộc tính này thành giá trị mặc định. Xem thêm initial.
inherit	Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Di truyền:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Ngôn ngữ lập trình JavaScript:	object.style.maxInlineSize="60px"