适合内容 | fit-content (Grid Layout) - CSS 中文开发手册 - Break易站


  •   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

    
    
  •   CSS 中文开发手册
  •   本文标题:适合内容 | fit-content (Grid Layout) – CSS 中文开发手册 - Break易站转载请保留页面地址:https://www.breakyizhan.com/css/32421.html
  • 上一篇:ARTS第四周打卡


    下一篇:实用的shell脚本面试题和答案