Foundation for Sites6.8.1 更新日志
组件列表

Flex 网格

Foundation 6 中新增了一个由 Flexbox 驱动的网格，您可以用它来代替传统的浮动网格。

Flex 网格的工作原理与标准浮动网格非常相似，但包含了许多只有 flexbox 才有的有用功能，例如水平和垂直对齐、自动调整大小以及更简单的源码排序。

浏览器支持

Flex 网格仅在 Chrome、Firefox、Safari 6+、IE10+、iOS 7+ 和 Android 4.4+ 中受支持。Android 2 中支持 Flexbox，但可靠性不足以用于此网格。（查看 flexbox 浏览器支持。）我们建议仅在可以接受纯尖端浏览器支持的项目中使用 Flex 网格。

在 Firefox 43+ 中，Flex 列中的图像可能会溢出其容器。要解决此问题，请为 Flex 列内的任何图像添加定义的 width，或对全出血图像使用 width: 100%。

导入

观看视频中的这部分
**从 Foundation v6.4 开始，Flex 网格默认禁用**，由新的 [XY 网格](xy-grid.html) 取代。除非您需要支持 IE 10，否则建议使用 XY 网格。

要在 Foundation v6.4+ 中使用 Flex 网格，您需要

  • 在 CDN 链接或包管理器中：导入 foundation-flex.css 来代替 foundation.css。
  • 在 Sass 中：将 $xy-grid 设置为 false。

如果您使用的是 Sass 版本的 Foundation，则可以启用框架范围的 flexbox 模式，并为 Flex 网格和 flexbox 辅助类添加导出。 了解有关启用 flexbox 模式的更多信息。

您可以使用以下命令手动生成 Flex 网格

@import 'foundation';

// @include foundation-grid;
@include foundation-flex-classes;
@include foundation-flex-grid;

Flex 网格使用与浮动网格相同的设置变量来调整间距大小、列数等。有关如何自定义 Flex 网格，请参阅默认网格的 Sass 变量参考。

标准网格和 Flex 网格使用一些相同的类，即 .row 和 .column，并且不能很好地协同工作。如果您想在同一个项目中同时使用这两种网格，我们建议您对每个网格使用 Sass 混入，而不是默认的 CSS。

基础知识

Flex 网格的结构与浮动网格的结构相同。行使用类 .row，列使用类 .column（或 .columns）。基本的基于百分比的大小调整也可以使用您习惯的相同网格类来完成：.small-6、.medium-12 等。

观看视频中的这部分

edit on codepen button 
<div class="row">
  <div class="columns small-6">6 columns</div>
  <div class="columns small-6">6 columns</div>
</div>
<div class="row">
  <div class="columns medium-6 large-4">12/6/4 columns</div>
  <div class="columns medium-6 large-8">12/6/8 columns</div>
</div>
6 列
6 列
12/6/4 列
12/6/8 列

高级大小调整

如果未向列添加大小调整类，则它只会扩展以填充剩余空间。我们称之为_扩展行为_。

观看视频中的这部分

edit on codepen button 
<div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>
4 列
剩下的任何东西！

多个扩展列将平均共享剩余空间。

观看视频中的这部分

edit on codepen button 
<div class="row">
  <div class="columns small-4">4 columns</div>
  <div class="columns">Whatever's left!</div>
  <div class="columns">Whatever's left!</div>
</div>
4 列
剩下的任何东西！
剩下的任何东西！

还可以通过添加 .shrink 类使列_收缩_。这意味着它只会占用其内容所需的水平空间。

观看视频中的这部分

edit on codepen button 
<div class="row">
  <div class="columns shrink">Shrink!</div>
  <div class="columns">Expand!</div>
</div>
收缩！
扩展！

响应式调整

如果未指定明确的大小，则 Flex 网格中的列不会换行 - 这就是允许神奇的自动调整大小工作的原因。要使列在较小的屏幕上堆叠，请手动添加 .small-12 类。

要从百分比或收缩行为切换回扩展行为，请使用 .medium-expand 或 .large-expand 类。在下面的示例中，列在小屏幕上堆叠，在大屏幕上变为等宽。

edit on codepen button 
<div class="row">
  <div class="columns small-12 large-expand">One</div>
  <div class="columns small-12 large-expand">Two</div>
  <div class="columns small-12 large-expand">Three</div>
  <div class="columns small-12 large-expand">Four</div>
  <div class="columns small-12 large-expand">Five</div>
  <div class="columns small-12 large-expand">Six</div>
</div>
一
二
三
四
五
六

自动堆叠

我们为上述行为提供了一些简写类。使用 .[size]-unstack 类默认堆叠行中的所有列，然后在更大的屏幕尺寸上取消堆叠，使每个列等宽。

edit on codepen button 
<div class="row medium-unstack">
  <div class="columns">One</div>
  <div class="columns">Two</div>
  <div class="columns">Three</div>
  <div class="columns">Four</div>
  <div class="columns">Five</div>
  <div class="columns">Six</div>
</div>
一
二
三
四
五
六

列对齐

可以沿其父行的水平轴或垂直轴对齐 Flex 网格中的列。

水平对齐

可以以与在段落中对齐文本相同的方式对齐列。默认情况下，所有列都向左对齐（或在 RTL 中向右对齐），但这可以通过向 Flex 行添加 .align-[dir] 类来覆盖。

观看视频中的这部分

edit on codepen button

<div class="row">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the left</div>
</div>
<div class="row align-right">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the right</div>
</div>
<div class="row align-center">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the middle</div>
</div>
<div class="row align-justify">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the edges</div>
</div>
<div class="row align-spaced">
  <div class="column small-4">Aligned to</div>
  <div class="column small-4">the space around</div>
</div>
与之对齐
左
与之对齐
右
与之对齐
中间
与之对齐
边缘
与之对齐
周围的空间

您可能想知道 .align-justify 和 .align-spaced 之间有什么区别。对齐网格 (justify-content: space-between) 均匀分布_在_每个列_之间_的空间。第一列和最后一列固定在网格的边缘。

间隔网格 (justify-content: space-around) 均匀分布_在_每个列_周围_的空间。这意味着在第一列的左侧和最后一列的右侧始终会有空间。

水平对齐类是 justify-content CSS 属性的简写。 了解有关 justify-content 的更多信息。

垂直对齐

默认情况下，Flex 网格中的所有列都拉伸到相同的高度。可以使用另一组对齐类来更改此行为。没错，_CSS 中的中间对齐_！

垂直对齐的选项包括 top、middle、bottom 和 stretch。请注意，我们对垂直对齐使用单词_middle_，对水平对齐使用_center_。

将垂直对齐类应用于 Flex 行将直接影响其中的每一列。

观看视频中的这部分

edit on codepen button 
<div class="row align-middle">
  <div class="columns">I'm in the middle!</div>
  <div class="columns">I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.</div>
</div>
我在中间！
我也是，但我有很多文字，我占用了更多空间！Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
<div class="row align-top">
  <div class="columns">These columns align to the top.</div>
  <div class="columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div>
</div>
这些列顶部对齐。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.

子列的垂直对齐（单独）

类似的对齐类也可以应用于单个列，这些列使用格式 .align-self-* 而不是 .align-*。

观看视频中的这部分

在 Foundation 6.2 中，我们引入了 .align-self-* 类，它取代了在列上使用 .align-* 类的旧方法。旧类已在 Foundation 6.3 中完全删除。

edit on codepen button 
<div class="row">
  <div class="column align-self-bottom">Align bottom</div>
  <div class="column align-self-middle">Align middle</div>
  <div class="column align-self-top">Align top</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
</div>
底部对齐
中间对齐
顶部对齐
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

折叠/展开行

.collapse 类允许您删除列间距（填充）。

有时您不希望每个媒体查询都被折叠或展开。在这种情况下，请使用所需的媒体查询大小并折叠或展开并将其添加到您的行元素中。示例显示了小型和中型的间距，而大型及以上没有间距。

.is-collapse-child 类从折叠父级下的嵌套行中删除负边距。

edit on codepen button 
<div class="row small-collapse medium-uncollapse">
  <div class="columns small-6">
    Removes gutter at small media query and adds at medium.
  </div>
  <div class="columns small-6">
    Removes gutter at small media query and adds at medium.
  </div>
</div>

将浏览器缩小到中等大小以查看差异。

在小屏幕上，我有间距！

在中等屏幕上，我有间距！

在大屏幕上，我没有间距！

在小屏幕上，我有间距！

在中等屏幕上，我有间距！

在大屏幕上，我没有间距！

偏移量

偏移量的工作方式与浮动网格相同，通过将 margin-left 应用于列。

edit on codepen button 
<div class="row">
  <div class="columns small-4 large-offset-2">Offset 2 on large</div>
  <div class="columns small-4">4 columns</div>
</div>
大型上的偏移量 2
4 列

块网格

要在行级别而不是单个列级别定义列宽，请将 .[size]-up-[n] 类添加到行，其中 [n] 是每行要显示的列数，[size] 是应用效果的断点。

观看视频中的这部分

块网格行默认具有属性 align-items: stretch，这意味着每行中的列高度相等。要更改此设置，请更改行的 align-items 属性，或使用 垂直对齐 flexbox 类 之一。

edit on codepen button 
<div class="row small-up-1 medium-up-2 large-up-3">
  <div class="column">1 per row on small</div>
  <div class="column">2 per row on medium</div>
  <div class="column">3 per row on large</div>
</div>
小型设备上每行 1 个
中等设备上每行 2 个
大型设备上每行 3 个

Sass 参考

混入

我们使用这些混入来构建此组件的最终 CSS 输出。您可以自己使用混入从我们的组件中构建自己的类结构。

flex-grid-row

@include flex-grid-row($behavior, $size, $columns, $base, $wrap, $gutters) { }

为 Flex 网格行创建容器。

参数类型默认值描述
$behavior 关键字或列表 null

对默认网格样式的修改。nest 表示该行将放置在另一行内。collapse 表示此行内的列将没有填充。nest collapse 结合了这两种行为。
$size 关键字或数字 $grid-row-width

行的最大大小。设置为 expand 使行占据整个宽度。
$columns 数字 null

用于此行的列数。如果设置为 null（默认值），则将使用全局列数。
$base 布尔值 true

设置为 false 以防止输出基本样式。如果您在同一个元素上两次调用此 mixin，这将非常有用，因为它可以防止重复的 CSS 输出。
$wrap 布尔值 true

设置为 false 可将行换行行为设置为 nowrap
$gutters 数字或映射 $grid-column-gutter

在反转边距时使用的 Gutter 映射或单个值，以防该行嵌套。默认情况下为响应式 Gutter 设置。

flex-grid-column

@include flex-grid-column($columns, $gutters);

为弹性网格创建一列。默认情况下，该列将拉伸到其容器的整个宽度，但这可以通过调整大小类或在父弹性行上使用 unstack 类来覆盖。

参数类型默认值描述
$columns 混合 expand

列的宽度。请参阅 flex-grid-column() 函数以查看可能的值。
$gutters 数字或映射 $grid-column-gutter

Gutter 宽度的映射或单个值。请参阅 grid-column-gutter mixin。

flex-grid-layout

@include flex-grid-layout($n, $selector);

为弹性网格行创建块网格。

参数类型默认值描述
$n 数字 无

每行显示的列数。
$selector 字符串 无

用于定位行内列的选择器。

flex-grid-size

@include flex-grid-size($columns);

更改宽度弹性网格列。

参数类型默认值描述
$columns 混合 expand

列的宽度。请参阅 flex-grid-column() 函数以查看可能的值。

函数

flex-grid-column

flex-grid-column($columns)

计算弹性网格列的 flex 属性。它接受与基本 grid-column() 函数相同的所有值，以及两个额外的值

  • expand（默认值）将使列扩展以填充空间。
  • shrink 将使列收缩，因此它只占用它需要的水平空间。
参数类型默认值描述
$columns 混合 expand

列的宽度。