标签：content Layout fit No support Break CSS size
CSS 中文开发手册适合内容 | fit-content (Grid Layout) - CSS 中文开发手册
这是一种实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
fit-content() 根据下式夹具给定尺寸到可用大小min(maximum size, max(minimum size, argument))。
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%)
该函数可用作CSS网格属性中的轨道大小，其中最大大小由max-content最小大小定义，最小大小除以等于（ie ）auto计算，除非轨道大小在参数大于在最低限度。autominmax(auto, max-content)auto
它也可以用作布置框尺寸为width，height，min-width，min-height，max-width和max-height，其中，所述最大尺寸是指最大内容大小和最小尺寸为最小的内容大小。
句法
接受一个<length>或一个<percentage>参数的函数
取值
<length>绝对长度。
<percentage>相对于给定轴上可用空间的百分比。在网格属性中，它相对于列轨道中网格容器的内联大小和行轨道中网格容器的块大小。否则，它是相对于可用的内联大小或块大小的布局框取决于写入模式。
形式语法
fit-content( [ <length> | <percentage> ] )
例
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;
} 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> 结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3The definition of 'fit-content()' in that specification. | Working Draft | Defines the function as laid out box size for width, height, min-width, min-height, max-width and max-height. |
| CSS Grid LayoutThe definition of 'fit-content()' in that specification. | Candidate Recommendation | Defines the function when used as a track size. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Supported as laid out box size | No support | ? | No support2 | No support | No support | ? |
| Supported as track size | 57.01 | No support | 52.0 (52.0)3 | No support | No support4 | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Supported as laid out box size | No support | No support2 | ? | ? | ? |
| Supported as track size | ? | 52.0 (52.0)3 | No support | No support | No support |
标签：content,Layout,fit,No,support,Break,CSS,size 来源： https://www.cnblogs.com/breakyizhan/p/13234053.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。