Max-inline-size - Thủ thuật CSS

max-inline-sizelà thuộc tính logic trong CSS xác định chiều rộng tối đa của một phần tử khi writing-modenằm ngang hoặc chiều cao tối đa của phần tử khi writing-modelà chiều dọc.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Như bạn có thể đoán bằng ví dụ trên, thuộc writing-modetính thay đổi hướng của dòng văn bản và bố cục 90 độ.

Lý do chính để thay đổi định hướng, ngoài việc tạo ra các thiết kế lạ mắt, là để phù hợp với quốc tế hóa trên một trang web. Nhiều chữ viết Đông Á như Trung Quốc, Nhật Bản và Hàn Quốc có thể được viết theo chiều ngang hoặc chiều dọc. Sử dụng thuộc tính logic, chúng tôi có thể cung cấp hướng định cỡ chính xác của các phần tử dựa trên chế độ viết của người dùng.

Jen Simmons có một bài báo và bài thuyết trình đi sâu hơn về các chế độ viết CSS.

Chúng ta không thể chỉ sử dụng `max-width`tài sản?

Đúng! Nhưng nếu bạn không hỗ trợ Internet Explorer, không có lý do gì để không sử dụng max-inline-sizethay thế. max-widthlà một thứ nguyên vật lý, vì vậy khi chế độ ghi thay đổi, một phần tử sẽ giữ nguyên kích thước chiều ngang của nó, phá vỡ bố cục khi nó được thiết lập thành chiều dọc. Các thuộc tính logic, chẳng hạn như max-inline-size, có thể phản ứng với những thay đổi đó và áp dụng kích thước theo hướng thích hợp.

Cú pháp

max-inline-size: ;

Ban đầu: auto
Áp dụng cho: giống như heightvàwidth
Kế thừa: không
Phần trăm: đối với tài sản vật chất tương ứng
Giá trị được tính toán: giống như heightvàwidth
Loại hoạt ảnh: theo loại giá trị được tính toán

Giá trị

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Bản giới thiệu

Khi writing-modeđược đặt thành vertical-rl, nội dung sẽ xoay, thay đổi bố cục. Chiều rộng của max-widthhộp sẽ xoay theo nội dung. Nhưng max-inline-sizelà thông minh! Nó giữ nguyên chiều rộng của nó, bất kể writing-modegiá trị là bao nhiêu. Chuyển đổi writing-modetrong bản trình diễn sau để thấy sự khác biệt giữa hai loại.