Flexbox 模式
对于支持前沿技术的浏览器，Foundation 的一些关键组件可以转换为 flexbox。
Flexbox 模式
Foundation 组件使用浮动、垂直对齐、表格单元格和各种其他 CSS 技巧的组合来使布局看起来正确。 然而，如今，有一种更好的方法......如果您对以下浏览器支持感到满意！
启用flexbox 模式将使用 flexbox 属性替换这些技巧，简化布局的制作方式，并使元素的大小调整和对齐更容易。
Flexbox 模式仅在以下浏览器中受支持
- 最新的 Chrome 和 Firefox
- Safari 6+
- IE/Edge 10+
- iOS 7+
- Android 4.4+
启用 Flexbox 模式
使用 Sass 版本的 Foundation，您可以通过两种方式启用 flexbox 模式
如果您在主 Sass 文件中使用 `foundation-everything()` mixin，请传入参数 `true` 以启用 flexbox 模式。
@include foundation-everything(true);如果您手动包含每个组件（就像我们的入门项目那样），请打开您的设置文件（基本模板：scss/_settings.scss，ZURB 模板：src/assets/scss/_settings.scss）并将 `$global-flexbox` 设置为 `true`，并删除浮动网格的 `@include` 并将其替换为 flex 网格的 `@include`，以及辅助类（基本模板：scss/app.scss，ZURB 模板：src/assets/scss/app.scss）
$global-flexbox: true;
// @include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;支持的组件
除了 flex 网格之外，以下组件也具有 flexbox 模式
通常，所有组件的工作方式都完全相同。但是，其中一些组件需要稍微更改 CSS 类才能正常工作。请参阅每个组件的文档以了解不同之处。
Sass 参考
变量
可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$flex-source-ordering-count |
数字 | 6 |
源排序计数的默认值` |
$flexbox-responsive-breakpoints |
布尔值 | true |
快速禁用/启用 Vanilla Flex 辅助程序的响应断点。 |
混合
我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用混合从我们的组件中构建自己的类结构。
flex
@include flex;通过向元素添加 `display: flex` 来启用 flexbox。
flex-align
@include flex-align($x, $y);水平或垂直对齐 flex 容器内的项目。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$x |
关键字 | null |
要使用的水平对齐方式。可以是 `left`、`right`、`center`、`justify` 或 `spaced`。或者，将其设置为 `null`（默认值）以不设置水平对齐。 |
$y |
关键字 | null |
要使用的垂直对齐方式。可以是 `top`、`bottom`、`middle` 或 `stretch`。或者，将其设置为 `null`（默认值）以不设置垂直对齐。 |
flex-align-self
@include flex-align-self($y);在 flex 行中垂直对齐单个列。将此混合应用于 flex 列。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$y |
关键字 | null |
要使用的垂直对齐方式。可以是 `top`、`bottom`、`middle` 或 `stretch`。或者，将其设置为 `null`（默认值）以不设置垂直对齐。 |
flex-order
@include flex-order($order);更改 flex 子级的源顺序。数字较小的子级先出现在布局中。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$order |
数字 | 0 |
要应用的订单号。 |
flex-direction
@include flex-direction($direction);更改 flex-direction
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$direction |
关键字 | row |
要使用的 Flex 方向。可以是
|