CSS - Thuộc tính min-inline-size: Hướng dẫn cho người mới bắt đầu
Xin chào các nhà vô địch CSS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS, cụ thể là khám phá thuộc tính min-inline-size. Đừng lo lắng nếu bạn là người mới; tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau giải quyết chủ đề này từng bước một. Cuối cùng của bài hướng dẫn này, bạn sẽ sử dụng thuộc tính này như một chuyên gia!
min-inline-size là gì?
Trước khi chúng ta đi sâu vào, hãy hiểu min-inline-size thực sự có nghĩa là gì. Hãy tưởng tượng bạn đang chuẩn bị hành lý cho chuyến đi, và bạn có một vali có thể giãn nở. min-inline-size giống như việc đặt kích thước tối thiểu cho vali ở chiều chính của nó. Trong thiết kế web, nó đặt kích thước tối thiểu của một yếu tố ở hướng inline.
Hiện tại, bạn có thể tự hỏi, "Hướng inline là gì?" Đối với hầu hết các trường hợp cho tiếng Anh và các ngôn ngữ tương tự, nó là hướng ngang. Nhưng đừng lo lắng, chúng ta sẽ khám phá điều này nhiều hơn sau!
Các giá trị có thể sử dụng
Hãy xem xét các giá trị khác nhau mà chúng ta có thể sử dụng với min-inline-size:
| Giá trị | Mô tả |
|---|---|
<length> |
Một độ dài cố định, như 100px hoặc 2em
|
<percentage> |
Phần trăm kích thước của container cha |
max-content |
Kích thước ưu tiên nội tại |
min-content |
Kích thước tối thiểu nội tại |
auto |
Trình duyệt quyết định kích thước tối thiểu |
Đừng lo lắng nếu những điều này có vẻ rối rắm bây giờ. Chúng ta sẽ khám phá từng cái với các ví dụ!
Áp dụng cho
Thuộc tính min-inline-size có thể được áp dụng cho tất cả các yếu tố ngoại trừ:
- Yếu tố inline, không thay thế
- Dòng bảng
- Nhóm dòng
Cú pháp
Cú pháp cơ bản cho min-inline-size rất đơn giản:
min-inline-size: <value>;Hãy cùng xem một số ví dụ để thấy cách nó hoạt động trong thực tế!
CSS min-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:
<div class="box">This is a box with min-inline-size set to 200px.</div>.box {
min-inline-size: 200px;
background-color: lightblue;
padding: 10px;
}Trong ví dụ này, chúng ta đang nói với trình duyệt, "Hey, đừng để box này nhỏ hơn 200 pixel." Nếu bạn thay đổi kích thước của cửa sổ trình duyệt, bạn sẽ thấy rằng box duy trì kích thước tối thiểu là 200px, ngay cả khi bạn cố gắng làm nó nhỏ hơn.
CSS min-inline-size - Giá trị
Bây giờ, hãy thử sử dụng giá trị phần trăm:
<div class="container">
<div class="box">This box has min-inline-size set to 50%.</div>
</div>.container {
width: 400px;
background-color: lightyellow;
padding: 10px;
}
.box {
min-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}Trong trường hợp này, chúng ta đang nói, "Đảm bảo rằng box này luôn rộng ít nhất bằng một nửa kích thước của container cha." Box sẽ rộng ít nhất 200px (50% của 400px), nhưng nó có thể lớn hơn nếu cần.
CSS min-inline-size - Giá trị max-content
Giá trị max-content rất thú vị. Nó đặt kích thước tối thiểu bằng kích thước ưu thích của nội dung. Hãy xem nó trong hành động:
<div class="box max-content">This box will expand to fit its content.</div>
<div class="box fixed">This box has a fixed width of 150px.</div>.box {
background-color: lightpink;
padding: 10px;
margin-bottom: 10px;
}
.max-content {
min-inline-size: max-content;
}
.fixed {
width: 150px;
}Box max-content sẽ giãn nở để phù hợp với tất cả nội dung trên một dòng, trong khi box có độ rộng cố định có thể làm văn bản xuống dòng.
CSS min-inline-size - Với văn bản dọc
Bây giờ, hãy xem điều gì thực sự thú vị! Nhớ khi tôi nói rằng hướng inline thường là ngang? Đó không phải lúc nào cũng đúng. Hãy xem một ví dụ với văn bản dọc:
<div class="vertical-text">This text is vertical!</div>.vertical-text {
writing-mode: vertical-rl;
min-inline-size: 100px;
background-color: lavender;
padding: 10px;
}Trong trường hợp này, vì chúng ta đã thay đổi writing-mode thành vertical, min-inline-size thực sự kiểm soát chiều cao tối thiểu của box, không phải chiều rộng!
Kết luận
Và thế là bạn đã có tất cả về thuộc tính min-inline-size từ trên xuống (hoặc có lẽ tôi nên nói, từ trái sang phải?). Nhớ rằng CSS là về việc thử nghiệm. Đừng ngại thử nghiệm với các thuộc tính này và xem会发生什么. Đó là cách chúng ta đều học hỏi!
Trước khi chúng ta kết thúc, đây là một mẹo nhanh từ những năm dạy học của tôi: luôn nghĩ về cách thiết kế của bạn sẽ hành xử trên các kích thước màn hình khác nhau. Thuộc tính min-inline-size có thể là một công cụ mạnh mẽ trong việc tạo ra các thiết kế linh hoạt trông đẹp trên mọi thứ từ điện thoại di động đến màn hình rộng.
Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy vui vẻ với CSS! Ai biết được? Thiết kế website tiếp theo ấn tượng có thể đến từ những thí nghiệm của bạn với min-inline-size!
Credits: Image by storyset