fit-content hoạt động như fit-content(stretch). Trong thực tế, điều này có nghĩa là hộp sẽ sử dụng không gian có sẵn, nhưng không bao giờ nhiều hơn max-content.fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content. Khi được sử dụng làm kích thước hộp được đặt ra cho width, <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
0, <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
1, <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
2, <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
3 và <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
4 Kích thước tối đa và tối thiểu đề cập đến kích thước nội dung. Lưu ý: Thông số kỹ thuật kích thước CSS cũng xác định hàm <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
5. Trang này chi tiết từ khóa. The CSS Sizing specification also defines the <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
5 function. This page details the keyword. width: fit-content;
block-size: fit-content;
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Cú pháp
Ví dụ
Sử dụng hàm lượng phù hợp để kích thước hộp
HTML
CSS
Kết quả
Thông số kỹ thuật
Mô-đun kích thước hộp CSS Cấp độ 4 # Valdef-Width-Fit-Intent # valdef-width-fit-content |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
- Từ khóa kích thước liên quan: <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 6, max-content
Hàm <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
5 CSS kẹp một kích thước nhất định với kích thước có sẵn theo công thức <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
9.<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
5 CSS function clamps a given size to an available size according to the formula <div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
9. Hàm có thể được sử dụng làm kích thước theo dõi trong các thuộc tính lưới CSS, trong đó kích thước tối đa được xác định bởi max-content và kích thước tối thiểu bằng .container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
1, được tính toán tương tự như .container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
1 (tức là, .container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
3), ngoại trừ kích thước theo dõi được kẹp tại đối số Nếu nó lớn hơn mức tối thiểu .container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
1. Xem trang .container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
5 để biết thêm thông tin về từ khóa max-content và .container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
1.Thử nó
Hàm <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 5 cũng có thể được sử dụng làm kích thước hộp được đặt cho width, ____10, <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 1, <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 2, <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 3 và <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 4, trong đó kích thước tối đa và tối thiểu đề cập đến kích thước nội dung.
Cú pháp
Hàm <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item"> Item with more text in it, hopefully we have added enough text so the text will start to wrap. </div> </div> 5 chấp nhận /* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) 6 hoặc /* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) 7 làm đối số.
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%)
Giá trị
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) 6
Một chiều dài tuyệt đối.
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) 7Một tỷ lệ phần trăm so với không gian có sẵn trong trục đã cho.
Trong các thuộc tính lưới, nó liên quan đến kích thước nội tuyến của thùng chứa lưới trong các rãnh cột và kích thước khối của thùng chứa lưới cho các rãnh hàng. Nếu không, nó liên quan đến kích thước nội tuyến có sẵn hoặc kích thước khối của hộp đặt ra tùy thuộc vào chế độ viết.
Ví dụ
Kích thước các cột lưới với nội dung phù hợp
HTML
<div id="container"> <div>Item as wide as the content.</div> <div> Item with more text in it. Because the contents of it are wider than the maximum width, it is clamped at 300 pixels. </div> <div>Flexible item</div> </div>
CSS
#container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; }
Kết quả
Thông số kỹ thuật
Mô-đun kích thước hộp CSS Cấp độ 4 # Kích thước giá trị # sizing-values |
Tính tương thích của trình duyệt web
CSS.ProperIES.WIDTH.FIT-CONTENT_FUNCTION
Bảng BCD chỉ tải trong trình duyệt
css.properties.grid-template-columns.fit-content
Bảng BCD chỉ tải trong trình duyệt