Các từ khóa min-content, max-content, fit-content, stretch trong CSS

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Tổng quan

Trong CSS có một số từ khóa đại diện cho các giá trị của kích thước (chiều rộng, hoặc chiều cao) của phần tử. Trong bài viết này tôi sẽ giải thích cách làm việc của chúng.
  • min-content
  • max-content
  • fit-content
  • stretch
Example
width: max-content;
width: min-content;
width: fit-content;
width: stretch;

max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: stretch;

min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: stretch;

height: max-content;
height: min-content;
height: fit-content;
height: stretch;

......
Chú ý: Các từ khóa trên chỉ làm việc với các phần tử khối (block element) hoặc các phần tử nội tuyến khối (inline-block element), điều này đảm bảo rằng các phần tử sẽ hiển thị dưới dạng một hình chữ nhật (Có chiều rộng và chiều cao).

2- min-content

Theo phương nằm ngang, từ khóa min-content đại diện cho giá trị nhỏ nhất của chiều rộng mà không làm nội dung của phần tử tràn ra ngoài theo phương nằm ngang.
min-content-h-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>

         .my-element  {
            display: inline-block;
            border: 1px solid gray;
            background-color: SeaShell;
            padding: 5px;
            margin: 15px 35px 0px 0px;
         }
      </style>
   </head>
   <body>
      <h2>Horizontal 'min-content' value?</h2>

       <div class="my-element" style="width:20px;">
           This is text content of element.
       </div>

       <div class="my-element" style="width: min-content;">
           This is text content of element.
       </div>

       <div class="my-element" style="width: 180px;">
           This is text content of element.
       </div>
   </body>
</html>
 
Theo phương thẳng đứng, từ khóa min-content đại diện cho giá trị nhỏ nhất của chiều cao mà không làm nội dung của phần tử tràn ra ngoài theo phương thẳng đứng.
min-content-v-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>
         .my-element  {
            border: 1px solid gray;
            padding: 5px;
            margin-bottom: 25px;
            background-color: SeaShell;
         }
      </style>
   </head>
   <body>
      <h2>Vertical 'min-content' value?</h2>

       <div class="my-element" style="height:35px;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>

       <div class="my-element" style="height: min-content;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>

       <div class="my-element" style="height: 90px;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>
   </body>
</html>

3- max-content

max-content là một từ khóa đại diện cho một giá trị, là chiều rộng nội tại (intrinsic) ưa thích của một phần tử, hoặc chiều cao nội tại ưa thích của một phần tử.

Giá trị max-content theo phương ngang được tính toán thế nào?

width: max-content;
min-width: max-content;
max-width: max-content;
Giả sử bạn làm cho phần tử cha có chiều rộng vô hạn (Hoặc rất lớn), và làm cho phần tử hiện tại có chiều cao nhỏ nhất (Mà không làm nội dung của nó tràn ra ngoài theo phương thẳng đứng). Khi đó giá trị max-content chính là chiều rộng nhỏ nhất, mà không làm nội dung của nó tràn theo phương nằm ngang.

Giá trị max-content theo phương thẳng đứng được tính toán thế nào?

height: max-content;
min-height: max-content;
max-height: max-content;
Giả sử bạn làm cho phần tử cha có chiều cao vô hạn (Hoặc rất lớn), và làm cho phần tử hiện tại có chiều rộng nhỏ nhất (Mà không làm nội dung của nó tràn ra ngoài theo phương ngang). Khi đó giá trị max-content chính là chiều cao nhỏ nhất, mà không làm nội dung của nó tràn theo phương thẳng đứng.

4- fit-content

Theo mặc định các phần tử viết nội dung của nó theo: "phương ngang, từ trên xuống dưới" (Horizontal, Top to Bottom) - CSS {writing-mode:horizontal-tb}. Trong trường hợp này, từ khóa fit-content chỉ có ý nghĩa theo phương nằm ngang.
  • TODO Link!
.element  {
  width: -moz-fit-content;  /** OLD Firefox */
  width: fit-content;
}
Nếu chế độ viết (Writing mode) theo phương nằm ngang. Một phần tử được sét CSS {width: fit-content} có nghĩa là:
  1. Nếu phần tử cha có thể cung cấp cho phần tử hiện tại một giá trị chiều rộng lớn hơn max-content thì fit-content = max-content.
  2. Nếu phần tử cha không thể cung cấp cho phần tử hiện tại một giá trị chiều rộng lớn hơn min-content thì fit-content = min-content.
  3. Nếu phần tử cha chỉ có thể cung cấp cho phần tử hiện tại một giá trị chiều rộng trong khoảng (min-content, max-content), phần tử hiện tại sẽ có chiều rộng "vừa vặn" (fit) với phần tử cha.
Từ khóa fit-content sẽ có ý nghĩa theo phương thẳng đứng nếu chế độ viết (writing mode) theo phương thẳng đứng, nghĩa là:
.element {
    writing-mode: vertical-rl | vertical-lr;
    width: fit-content;
}

Xem thêm các chuyên mục: