CSS | fit-content() 属性

CSS fit-content 属性是 CSS 中的内置属性。此属性用于根据此公式调整大小min(maximum size, max(minimum size, argument)) 。 fit-content() 属性用于定义函数来限制分区的最大大小。这个公式在处理 CSS 网格时非常有用。但是，必须记住 fit-content() 与 PC 上的 Internet Explorer 不兼容。在这个公式中可以使用不同的 CSS 单位。 fit-content()函数接受长度和百分比作为参数。

句法：

fit-content: length | percentage

属性值：

• length：该属性值包含固定长度。
  单位：绝对长度
  • 适合内容(8cm)
  • 适合内容(12mm)
  • 适合内容(8pc)
  • 适合内容(15px)
  • 适合内容(5pt)
• 百分比：此属性值包含的相对长度取决于给定轴上的可用空间。
  单位：相对长度
  • 适合含量(100%)
  • 适合内容(10em)
  • 适合内容(5rem)
  • 适合内容(2ch)

下面的示例说明了 CSS fit-content 属性：

示例：可以看出网页被划分为四个网格列。第一个、第二个和第三个分区的最大允许宽度分别为 150px、250px 和 350px，而第四个分区的宽度已设置为 1.5fr。这意味着它将根据设备宽度和其他三个分区占用的宽度进行自我调整。

  

    
    
    
    
  
    
    
  

  

  

    
GeeksforGeeks
    

  
        

          The smallest division of the grid. 
          Maximum width is clamped to 150px.
        
        

          This division's width will depend on
          the content inside it. However, the
          maximum width will be 250px.
        
        

            
              Division with some more data, however, 
              the maximum permissible width will be 350px.
            
            

            
 
          Web design encompasses many different skills
          and disciplines in the production and maintenance 
          of websites. The different areas of web design 
          include web graphic design; interface design; 
          authoring, including standardized code and 
          proprietary software; user experience design;
          and search engine optimization.
        
        

          Flexible division, the width will change in 
          accordance with the screen size and the width
          of the other three divisions.
        
    
  

  

输出：

说明：让我们逐步看一下示例。

• Step 01: Normal Layout，正常的网页布局。 CSS Grid 用于演示目的。 CSS Grid 有助于创建响应式网页，因为网格划分会根据屏幕宽度进行调整。
  
• 步骤 02：屏幕宽度开始减小。第四师已经开始萎缩，但第一、第二和第三师仍然不受影响。
  
• 步骤 03：最小宽度，第三格缩水最多。第一个和第二个分区中的内容已经以不会溢出的方式进行了调整。网格对屏幕宽度的变化反应良好。
  
• 步骤 04：屏幕宽度开始增加。现在屏幕宽度增加了，所有分区的宽度也相应增加了。但是，设置了第一、第二和第三分区宽度的上限，因此在限制该阈值限制后，它们将得到固定。然而，第四师将继续扩大。
  
• 步骤05：回到正常布局网格已恢复到正常布局。
  

从步骤02、03、04可以看出，一旦屏幕宽度开始缩小，第4格首先缩小。一旦宽度开始增加，所有的分区都开始扩展，但是，第一个分区在宽度变为 150px 后停止扩展，而第二个和第三个分区分别扩展到 250px 和 350px 的宽度。第四师继续扩大。这是因为它的宽度设置为 1.5fr，这意味着它自己的宽度将取决于屏幕和其他分区的宽度。