Foundation - Flex Grid SASS 参考
描述
SASS(Syntactically Awesome Stylesheet)是一个 CSS 预处理器，有助于减少 CSS 重复并节省时间。
Mixins
最终的 CSS 输出是使用 mixin 构建的。mixin 可用于从这些组件构建您自己的类结构。以下是用于构建最终 CSS 输出的混合。
flex-grid-row
使用此混合为 flex grid row 创建容器。
@include flex-grid-row($behavior, $width, $columns, $base) { }
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$behavior 修改默认网格样式。 |
关键字或列表 | null |
| 2 |
$width 行的最大宽度。 |
数字 | $grid-row-width |
| 3 |
$columns 设置此行的列数。 |
关键字或列表 | null |
| 4 |
$base 在同一元素上两次调用 mixin 很有用，因为它会创建重复的输出。 |
Boolean | true |
flex-grid-column
使用 mixin 创建 Flex 网格列。在父级 flex 行上使用 unstack 类，可以将列拉伸到容器的整个宽度。
@include flex-grid-column($columns, $gutter);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$columns flex-grid-column() 函数用于获取可用值。 |
混合 | 空 |
| 2 |
$gutter 在列之间创建空间 |
数字 | $grid-column-gutter |
flex-grid-order
弹性网格列的来源已更改。布局中最低的列号首先出现。
@include flex-grid-order($order);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$order 应用订单号。 |
数字 | 0 |
函数
以下是 flex grid 的函数 −
flex-grid-column
flex 属性是针对 flex grird 列计算的。相同的值与基本 grid-column() 函数以及以下参数一起被接受 −
null − 将列扩展到整个空间。
shrink − 收缩列。
flex-grid-column($columns)
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$columns 设置特定列宽。 |
混合 | null |
foundation_flex_grid.html
