实现垂直对齐（谢谢，subgrid！）

现代网络设计工具已大大提高了垂直对齐功能。早期网站的布局通常宽960px，使用12列网格严重依赖水平对齐。媒体查询的出现在解决了许多问题的同时，引入了新的挑战，尤其是在元素反思或重新定位时保持一致性。

考虑一个常见的情况：一个包含按钮组的“栏”，每个都在<fieldset></fieldset>与<legend></legend>。在较大的屏幕上，对齐非常简单。一种简单的CSS方法，使用浮子处理，并在较小的断点下提供响应迅速的行为：

 。
  宽度：48％；
  浮子：左；
  边缘权利：1％；
}

/* 移动的 */
@Media仅屏幕和（最大宽度：480px）{
  。
    宽度：100％；
  }
}

但是，在较小的屏幕上，垂直错位变得显而易见。虽然固定宽度，但使用媒体查询的基于像素的CSS解决方案可以强制对齐，但这种方法缺乏灵活性，并且依赖于与特定内容相关的“魔法数”：

 /* 移动的 */
@Media仅屏幕和（最大宽度：480px）{
  传奇 {
    宽度：160px;
  }
  按钮 {
    宽度：130px;
  }
}

这种不灵活的性能，再加上对媒体查询的依赖（我的目的是最小化），因此需要一个更适合适应性的解决方案。理想的解决方案应允许按钮和标签响应：

1. 可用空间
2. 内容维度
3. 周围元素

媒体查询不足，因为他们不考虑周围空间，如海顿·皮克林（Heydon Pickering）的“ flexbox holy baratross”所示。所需的行为是第二​​个<fieldset></fieldset>仅当两个字段集不再适合单行时，才包装。

Flexbox和网格：初始尝试

Flexbox，其flex-wrap: wrap属性，提供了提高的柔韧性，从而使元素可以流向多条线。但是，对于完美的垂直对齐，通常仍然需要一个min-width 。

CSS网格专为布局管理而设计，为无媒体查询的多线布局提供了auto-fit和auto-fill关键字（在repeat()中）。使用auto-fit ，我们实现了：

 。
  显示：网格；
  网格 - 板柱：重复（自动拟合，450px）;
  网格间隙：10px;
}

但是，最佳对齐仍然可能需要绝对宽度值。使用fr单元或minmax()灵活网格轨道可提供进一步的改进，但是出现限制，因为只有直接的网格容器的直接儿童才被视为网格项目。

亚网格解决方案

CSS网格级别2引入了subgrid ，从而使嵌套的网格从其父母那里继承了轨道尺寸。这解决了独立嵌套网格的问题。子网格允许儿童网格中的元素响应兄弟姐妹网格中的内容。

对于我们的按钮示例，使用auto-fill和minmax()定义父网格：

 。
  显示：网格；
  网格 - 板柱：重复（自动填充，minmax（150px，1fr））;
  网格间隙：10px;
}

儿童网格使用subgrid继承父母的列轨道：

 .sub-Grid {
  显示：网格；
  网格列：跨度3；
  网格板柱：子格里德；
  准项目：中心；
}

这确保了一致的对齐和响应行为。按钮和标签适合可用空间，仅在必要时才包裹在新线路上。

浏览器兼容性和进一步阅读

亚网格浏览器支持目前受到限制（主要是Firefox）。 CSS功能查询可以为其他浏览器提供后备。有关详细的浏览器兼容性信息，请参阅Caniuse.com。有关此主题的进一步阅读包括Miriam Suzanne，Rachel Andrew和Heydon Pickering的文章（原始文章中提供的链接）。对于处理涉及形式元素，网格和flexbox的错误，可能需要在野外围绕的包装器。可以将FieldSet的display属性设置为contents以解决此问题。

以上是实现垂直对齐（谢谢，subgrid！）的详细内容。更多信息请关注PHP中文网其他相关文章！