Hướng dẫn fit-content css - nội dung phù hợp css

Question

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.

Nội dung chính Show

Sử dụng hàm lượng phù hợp để kích thước hộp
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Kích thước các cột lưới với nội dung phù hợp
Thông số kỹ thuật
Tính tương thích của trình duyệt web
CSS.ProperIES.WIDTH.FIT-CONTENT_FUNCTION
css.properties.grid-template-columns.fit-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.

Cú pháp

width: fit-content;
block-size: fit-content;

Ví dụ

Sử dụng hàm lượng phù hợp để kích thước hộp

HTML

<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>

CSS

.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;
}

Kết quả

Thông số kỹ thuật

Sự chỉ rõ
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.

Thử nó

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.

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%)

7

Mộ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;
}