fit-content
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2021ë 11ì.
fit-content í¤ìëë fit-content(stretch)ì ëì¼í©ëë¤. ì¤ì ë¡ ì´ë ë°ì¤ê° ì¬ì© ê°ë¥í ê³µê°ì ì¬ì©íë, ì ë max-contentë³´ë¤ í¬ì§ë ììì ì미í©ëë¤.
width, height, min-width, min-height, max-width ë° max-height ê° ë ì´ììë ë°ì¤ì í¬ê¸°ë¡ ì¬ì©ë ê²½ì°, ìµë í¬ê¸°ì ìµì í¬ê¸°ë ì½í
ì¸ ì í¬ê¸°ë¥¼ 참조í©ëë¤.
ì°¸ê³ :
CSS Sizing ëª
ì¸ë fit-content() í¨ìë ì ìí©ëë¤. ì´ íì´ì§ììë í´ë¹ í¤ìëì ëí´ ì¤ëª
í©ëë¤.
구문
css
width: fit-content;
block-size: fit-content;
ìì
fit-content를 ì¬ì©í´ ë°ì¤ í¬ê¸° ì¤ì í기
HTML
html
<div class="container">
<div class="item">í목</div>
<div class="item">ë ë§ì í
ì¤í¸ê° í¬í¨ë í목ì
ëë¤.</div>
<div class="item">
í
ì¤í¸ê° ë ë§ì´ í¬í¨ë í목ì
ëë¤. í
ì¤í¸ê° ì¤ë°ê¿ë기를 기ëíë©° 충ë¶í
ìì í
ì¤í¸ë¥¼ ì¶ê°íìµëë¤.
</div>
</div>
CSS
css
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
ê²°ê³¼
ëª ì¸ì
| Specification |
|---|
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |
ë¸ë¼ì°ì í¸íì±
ê°ì´ 보기
- ì°ê´ë í¬ê¸° ì¤ì í¤ìë:
min-content,max-content - CSS box sizing 모ë