当前位置: 千企汇网站设计> 建站知识> 常见问题>CSS网格遇到的问题和绊脚石

CSS网格遇到的问题和绊脚石

文章出处:网站建设-千企汇网络 | 网站编辑:网站设计 | 发表时间:2020/10/21 21:56:41
分享:

CSS网格是一种处理布局的不同方式,当人们开始使用这个规范时,我会被问到一些常见的问题。本文旨在回答其中的一些问题,并将是有关布局的Smashing杂志系列文章中的一篇。

为什么要使用网格而不是Flexbox?在CSS网格布局登陆浏览器之前,很多人认为flexbox是解决我们所有设计相关问题的答案。然而,flexbox并不像float那样提供网格系统,尽管它确实使创建网格系统变得更简单。真正的网格是二维的。这两个维度是行和列,使用网格布局可以同时控制这两个维度。使用flexbox,您可以选择将项目布局为行还是列,其中一个或另一个两个都有。这里是一个简单的例子,突出了两者的区别。第一个布局使用flexbox来显示尽可能多的框以适应可用的宽度。在这里,我们正在控制整个行的布局。我们允许flex项包装,因此它们创建新行,但是每一行都是一个新的flex容器。空间分布发生在整个行中,因此根据最后一行有多少项,它们有时不会与上面的项对齐以生成网格。示例1: 灵活布局于一体尺寸。尺寸第二个例子用网格来做同样的布局,但是,您可以看到,最后一行中的项在其列中始终保持对齐。这是因为使用网格,我们将项目按行和列排列-二维布局。

示例2:二维网格布局。

您还可以在第二个示例中看到,使用网格布局,我们不需要在网格项中添加任何内容来进行布局。所有的东西都放在集装箱上了。在flex布局中,必须针对flex项设置flex grow、flex shrink和flex basis的属性。这是理解网格布局的一个关键问题,也许也是人们存在的许多困惑所在。网格主要是关于包含元素的,而我们以前所有的布局方法都依赖于布局中项目的设置宽度来生成看起来像网格的东西

关键字:
宿迁高新区
建站热线:13815417591
SEO热线:13276617532
免责声明: 本站部分内容来源于互联网,如果本站部分内容侵犯您的权益,请您告知,站长会立即处理。