基础6：新的Flex网格

基础6的Flex网格：一个功能强大的，基于Flexbox的布局系统

基础6引入了改变游戏规则的Flex网格，利用Flexbox的力量来创建响应迅速且复杂的Web设计。 但是，该高级系统需要浏览器兼容性考虑。它与IE8和IE9等传统浏览器不兼容。

关键特征和注意事项：>

>可选组件：
• 默认情况下未启用flex网格。 它被设计为替代标准网格的替代品，并且由于重叠的类名称（，）。 .row.column增强控制：可以轻松管理元素顺序，水平和垂直对齐以及其他布局方面。 创建多个网格，每个网格都具有唯一的布局，用于颗粒状控制。
>
• 浏览器支持：其对Flexbox的依赖仅意味着与现代浏览器的兼容性。 传统浏览器支持需要坚持使用标准网格。
• 实现flex网格：

>

对于SASS用户，修改：

对于自定义构建，请在自定义过程中选择Flex网格。> app.scss

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

基本用法：

一个简单的3列布局：

元素排序：

<div class="row">
  <div class="column small-12 medium-6 large-4">Column 1</div>
  <div class="column small-12 medium-6 large-4">Column 2</div>
  <div class="column small-12 medium-6 large-4">Column 3</div>
</div>

flexbox简化了元素的重新排序。 使用

或进行特定于设备的排序：

>特定于设备的排序：order-{value} {size}-order-{value}

<div class="row">
  <div class="column order-2">Second</div>
  <div class="column order-1">First</div>
</div>

<div class="row">
  <div class="column small-order-1 medium-order-2">Small: First, Medium: Second</div>
  <div class="column small-order-2 medium-order-1">Small: Second, Medium: First</div>
</div>

对齐：

>使用

，等的类轻松地将内容放在水平和垂直上，该类应用于>或单个

元素。 例如，均匀间隔的菜单项：

align-center align-middle.row修订后的SASS网格系统：.column>

基础6增强其核心网格混合蛋白，允许具有不同列计数的多个网格定义。 这启用了高度自定义的布局：

<div class="row align-spaced">
  <div class="column small-3">Home</div>
  <div class="column small-3">About</div>
  <div class="column small-3">Contact</div>
</div>

结论：

与其前身相比，

基础6的Flex网格提供了优越的灵活性和对布局的控制。 如果传统浏览器支持不是约束，则是精简开发和适应性设计的建议方法。 增强的Sass Grid Mixin进一步使开发人员具有高度定制的网格系统。

以上是基础6：新的Flex网格的详细内容。更多信息请关注PHP中文网其他相关文章！