Grid： CSS Grid Layout，是一种基于网格的二维布局系统，具有行和列，可以更轻松地设计网页，而无需使用浮动和定位。像表格一样，网格布局允许我们将元素对齐到列和行中。
首先，您必须将容器元素定义为带有display: grid 的网格，使用 grid-template-columns 和 grid-template-rows 设置列和行的大小，然后使用 grid-column 将其子元素放入网格中和网格行。
例子：
HTML
Welcome To GeeksForGeeks
Home
Read
Write
About Us
Contact Us
Privacy Policy
HTML
Welcome To GeeksForGeeks
Home
Read
Write
About Us
Contact Us
Privacy Policy
Flexbox： CSS Flexbox 提供一维布局。它有助于在容器(由网格组成)中分配和对齐项目之间的空间。它适用于各种显示设备和屏幕尺寸。
首先，您必须将容器元素定义为带有display: flex; 的网格。
例子：
HTML
Welcome To GeeksForGeeks
Home
Read
Write
About Us
Contact Us
Privacy Policy
Grid 和 Flexbox 的独特性：
一维与二维：
- Grid 用于二维布局，而 Flexbox 用于二维布局。这意味着 Flexbox 可以同时作用于行或列，而 Grids 可以作用于两者。
- Flexbox，在处理任一元素(行或列)时为您提供更大的灵活性。在这种情况下，HTML 标记和 CSS 将很容易管理。
- GRID 使您可以更灵活地在块中移动，而不管您的 HTML 标记如何。
内容优先与布局优先：
- Flexbox 和 Grids 之间的主要独特之处在于，前者适用于内容，而后者则基于布局。
- Flexbox 布局最适合应用程序组件和小规模布局，而 Grid 布局则是为设计上不是线性的大规模布局而设计的。
Grid 和 Flexbox 的区别：
1. 维度和灵活性：
- Flexbox 可以更好地控制项目之间的对齐和空间分布。作为一维的，Flexbox 只处理列或行。
- Grid 具有二维布局功能，允许灵活的宽度作为长度单位。这弥补了 Flex 中的限制。
2.对齐：
- Flex Direction 允许开发人员垂直或水平对齐元素，这在开发人员创建和反转行或列时使用。
- CSS Grid 为网格流动性和自动关键字功能部署分数度量单位以自动调整列或行。
3. 物品管理
- Flex Container 是父元素，而 Flex Item 代表子元素。 Flex Container 可以通过调整项目尺寸来确保平衡表示。这允许开发人员针对波动的屏幕尺寸进行设计。
- 网格支持隐式和显式内容放置。其内置的自动化功能允许它自动扩展行项目并将值从前一个项目复制到新创建的项目中。
|
Property |
Grid |
Flexbox |
|
Dimension |
Two – Dimensional |
One – Dimensional |
|
Features |
Can flex combination of items through space-occupying Features |
Can push content element to extreme alignment |
|
Support Type |
Layout First |
Content First |
结论
- CSS Grids 可帮助您创建网页的外部布局。您可以使用它构建复杂的响应式设计。这就是为什么它被称为“布局优先”。
- Flexbox 主要帮助对齐内容和移动块。
- CSS 网格用于 2D 布局。它适用于行和列。
- Flexbox 仅在一维(行或列)中效果更好。
- 如果您同时使用两者，将会节省更多时间并且更有帮助。