无需媒体查询的响应式 CSS 布局网格

kazi02

许多网站的基础仍然是布局网格，无论它是由 Grid 还是 Flexbox 组成。在释放 CSS 的力量：响应式用户界面的高级技术 的这段摘录中，我们将了解这两个工具如何提供无需媒体查询即可创建流畅响应的布局网格的方法。 Backward Skip 10s Play Video Forward Skip 10s 带网格的响应式布局 首先可能是所有解决方案中我最喜欢的，因为它的多功能性和易用性。使用网格，我们可以创建一组响应式列，这些列可以根据需要自行创建。我们将提供一个约束——列的最小宽度——它在列项分解到新行之前作为一种“断点”发挥双重作用。 以下视频演示了我们所追求的行为。 Learn to Code with JavaScript 以下是完成此响应式网格布局所需的全部内容，其中我们的最小列大小30ch通过辅助自定义属性设置。


此规则指示浏览器创建尽可能多的列，并且宽度至少要合适由于1fr是 的“最大值” minmax()，因此列也可以拉伸以均匀地填充行内的任何剩余空间。因此，如果可用空间为80ch且有两个网格子项，则它们各自占用40ch。如果有三个子级，则第三个将位于第二行，因为80不能均等地划分 印度手机号码列表 为 允许的最小大小30。 以下CodePen 演示提供了响应式网格布局的实时示例。 要了解有关网格布局的更多信息，请查看我们的CSS 网格初学者指南。 使用 Flexbox 的响应式布局 我们可以使用 Flexbox 实现类似的体验。Flexbox 和 Grid 解决方案之间的区别在于，流向新行的网格项无法跨多个网格列扩展。使用 Flexbox，我们可以引导 Flex 项目增长以填充所有剩余的额外空间，从而防止网格解决方案中出现“孤儿”。




在此代码中，与网格代码中一样，浏览器将创建尽可能多的列以适合内联空间，其大小至少--min为30ch. 如果我们有三个项目，而第三个项目需要移动到新行，则由于简写，它将占用剩余空间flex，重要的是设置flex-grow为1。因此，它在大多数情况下具有类似的行为下图显示了最终的奇数列表项，跨越两列，这要归功于该flex-grow属性。 在布局的 Flexbox 版本中，第三个也是最后一个列表项跨越两列 注意：在 Grid 和 Flexbox 解决方案中，如果我们添加间隙，则在添加新行之前计算可以创建的列数时会减去该空间。 敏锐的读者可能已经注意到这些解决方案之间的另一个关键区别：使用网格时，父级定义子级行为。对于 Flexbox，我们在子项上设置子项布局行为。速记集flex按顺序为和。 作为实验，我们可以将flex-grow值更改为0并查看项目如何仅扩展到该flex-basis值。