高级尺寸（Advanced Sizing）

优质

小牛编辑

126浏览

2023-12-01

描述 (Description)

如果大小类未包含在列中，则它会自行扩展并填充列中的剩余空间。多列也保持相等的空间。

shrink类用于使列缩小，即它占用内容所需的水平空间。

例子 (Example)

以下示例演示了在Foundation中使用advanced sizing -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Foundation Template</title>
      <link rel = "stylesheet" href = "css/foundation.css" />
      <script src = "js/vendor/jquery.min.js"></script>
      <script src = "js/foundation.min.js"></script>
   </head>
   <body>
      <h2>Example of Flex Grid</h2>
      <div class = "row">
         <div class = "small-5 columns" style = "background-color:#8BD6EE;">Small 5 columns</div>
         <div class = "columns" style = "background-color:#C0B0F0;">Expanded columns</div>
         <div class = "columns" style = "background-color:#8BD6EE;">Expanded columns</div>
      </div>
      <br/>
      <h2>Shrink column</h2>
      <div class = "row">
         <div class = "shrink columns" style = "background-color:#FF6347;">
            Shrink column
         </div>
         <div class = "columns" style = "background-color:#7B68EE;">
            Expanded columns
         </div>
      </div>
   </body>
</html>