CSS - max-inline-size Thuộc tính: Hướng dẫn dành cho người mới bắt đầu

Xin chào các bạn tương lai của CSS! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới đầy thú vị của thuộc tính max-inline-size. Đừng lo lắng nếu bạn là người mới; tôi sẽ là hướng dẫn viên thân thiện của bạn trong cuộc phiêu lưu CSS này. Vậy, hãy lấy một cốc cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!

max-inline-size là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu rõ max-inline-size là về điều gì. Hãy tưởng tượng bạn đang cố gắng nhét một từ rất dài vào một hộp nhỏ. Đó chính là điều max-inline-size giúp chúng ta trong CSS. Nó xác định kích thước tối đa của một phần tử theo hướng inline.

"Nhưng đợi đã," bạn có thể hỏi, "hướng inline là gì?" Câu hỏi tuyệt vời! Trong tiếng Anh và nhiều ngôn ngữ khác, hướng inline là horizontial - từ trái sang phải. Tuy nhiên, trong một số ngôn ngữ như阿拉伯语 hoặc Do Thái, nó từ phải sang trái. Và trong các chế độ viết dọc, nó thậm chí có thể từ trên xuống dưới!

Các giá trị khả thi

Bây giờ, hãy xem xét các giá trị khác nhau mà chúng ta có thể sử dụng với max-inline-size. Dưới đây là bảng tham khảo cho bạn:

Giá trị	Mô tả
<length>	Một độ dài cố định như 300px hoặc 20em
<percentage>	Phần trăm của kích thước khối chứa
none	Không có giới hạn về kích thước (đây là mặc định)
max-content	Kích thước ưa thích nội tại
min-content	Kích thước tối thiểu nội tại
fit-content	Sử dụng không gian khả dụng, nhưng không nhỏ hơn min-content và không lớn hơn max-content

Đừng lo lắng nếu một số giá trị này có vẻ rối rắm bây giờ. Chúng ta sẽ khám phá từng giá trị với các ví dụ!

Áp dụng cho

Thuộc tính max-inline-size áp dụng cho tất cả các phần tử ngoại trừ:

• Các phần tử inline không thay thế
• Các hàng trong bảng
• Các nhóm hàng

Cú pháp

Cú pháp cơ bản cho max-inline-size rất đơn giản:

max-inline-size: giá trị;

Dễ dàng phải không? Bây giờ, hãy cùng vào một số ví dụ cụ thể!

CSS max-inline-size - Giá trị

Hãy bắt đầu với một ví dụ đơn giản sử dụng độ dài cố định:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
This is a box with max-inline-size set to 300px. The content will wrap if it exceeds this width.
</div>

Trong ví dụ này, chúng ta đã đặt max-inline-size là 300 pixel. Điều này có nghĩa là không matter how much content we put inside the .box, it will never stretch beyond 300px in the inline direction (which is horizontal in this case). If the content is too long, it will wrap to the next line.

CSS max-inline-size - Giá trị

Bây giờ, hãy thử sử dụng giá trị phần trăm:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
This box has max-inline-size set to 50% of its container's width.
</div>
</div>

Trong trường hợp này, .box sẽ có kích thước inline tối đa là 50% của chiều rộng khối chứa. Vậy, nếu khối chứa rộng 500px, hộp sẽ không vượt quá 250px trong chiều rộng.

CSS max-inline-size - Giá trị

Giá trị max-content rất thú vị. Nó đặt kích thước inline tối đa thành kích thước ưa thích của nội dung. Hãy xem nó trong hành động:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
This box will expand to fit its content, but won't wrap unless forced to.
</div>

Với max-content, hộp sẽ mở rộng để phù hợp với tất cả nội dung trên một dòng, chỉ cuộn nếu buộc phải (như khi nó va vào mép của viewport).

CSS max-inline-size - Với Văn bản Dọc

Bây giờ, hãy thử điều gì đó khác biệt! Hãy xem max-inline-size hoạt động như thế nào với văn bản dọc:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
This text is vertical, and max-inline-size limits its height!
</div>

Trong ví dụ này, chúng ta đã sử dụng writing-mode: vertical-rl để làm văn bản dọc và phải sang trái. Bây giờ, max-inline-size thực sự đang giới hạn chiều cao của hộp, vì trong chế độ viết dọc, hướng inline là dọc!

Kết luận

Và đó là tất cả, các bạn! Chúng ta đã khám phá thuộc tính max-inline-size từ đầu đến cuối (hoặc có lẽ tôi nên nói, từ đầu inline đến cuối inline?). Nhớ rằng, CSS là tất cả về thử nghiệm. Đừng sợ thử nghiệm với các thuộc tính này và xem会发生什么. Đó là cách chúng ta đã học!

Trước khi tôi để bạn đi, đây là một câu đùa để nhớ max-inline-size: Tại sao thuộc tính CSS lại đi tập thể dục? Để làm việc trên max-inline-size của nó, tất nhiên rồi!

Chúc các bạn vui vẻ mã hóa, và hy vọng rằng các bố cục của bạn luôn linh hoạt và nội dung của bạn luôn phù hợp hoàn hảo!

Credits: Image by storyset