网站内容的组织方式很能说明你或你的组织。仅仅正确的内容是不够的，但是知道如何组织你的内容是非常重要的。当你想专注于内容时，你的网站或你的web应用程序的布局是最重要的。级联样式表的职责是尽可能优雅地组织和显示您的内容。谢天谢地，我们有两个强大的CSS布局机制可供使用：CSS Flexbox和CSS Grid。但问题是什么时候使用Flexbox，什么时候使用Grid。

什么是css flexbox(css flexbox)？

Flexbox是CSS Flexible Box模块的缩写，是CSS中的一维布局模型，它使页面、应用程序、小部件或库的布局变得简单，或者只是站点所需的任何响应性功能。由于Flexbox强大的对齐功能，您可以使用浮动或定位轻松创建灵活的响应设计。物品弯曲以适应额外的空间，收缩以适应狭小的空间。Flexbox基本上是一个布局模型，它提供了一种简单而整洁的方式来排列容器中的项目。如果容器的display属性设置为flex，则会调整其中容器的大小，但容器的边距不会随内容的边距一起收拢。它允许您计算和分配空间，但不改变基础标记。根本没有浮标，而且反应灵敏，便于移动。

什么是css网格(css grid)？

cssgridlayout模块（cssgrid）是一个强大的基于网格的布局系统，采用层叠样式表，使用二维网格设计跨浏览器的复杂响应web布局非常简单。这些年来，Web应用程序变得越来越复杂，开发人员需要一些简单的东西来帮助他们进行高级布局，而不需要使用任何复杂的解决方案，比如使用float。CSS网格为这个问题提供了一个独特的解决方案，它提供了一种灵活的方法，只需级联样式表就可以更改元素的位置，甚至不需要更改HTML。它在很大程度上取代了使用任何一种基于float的布局、Flexbox或您以前使用的任何东西的需要。CSS网格背后的思想是将页面划分为主要区域，同时还允许您根据大小、位置和层来定位和调整构建块元素的大小。它使您能够同时横向和向下布置项目，这是Flexbox容器无法实现的。

css flexbox和grid的区别

布局

–两个布局模块之间的第一个也是最重要的区别是CSS Flexbox是一维布局模型，而CSS Grid是二维模型。通过一维，这意味着Flexbox容器既可以方便地将事物排成一行，也可以将它们排成一列。

另一方面，CSS网格可以方便地将项目一次下一次地横放，这意味着可以沿两个轴（垂直和水平）工作，而CSS Flexbox无法做到这一点。网格同时考虑行和列。

控制

–CSS Flexbox帮助您在一个方向上水平地组织事物，或在一个方向上垂直地组织事物。计算在每一行中进行，一次一个，而不考虑其他行，您可以在每一行中调整对正和对齐控件。

另一方面，cssgrid为您提供了在两个方向上都能完美工作的布局控件，这意味着它允许您在网格单元内的任何位置进行组织。

重叠

–Flexbox和Grid都可以做一些事情，这意味着在某些情况下它们基本上可以做相同的事情。但是有一件事Grid可以做，而Flexbox不能做，那就是故意重叠项目。例如，在杂志布局中，您可以看到始终存在重叠的元素。您可以看到布局中的小块和小块与其他小块和小块重叠。

CSS网格帮助您创建具有重叠元素的布局，以产生兴趣或帮助您进行某种不对称布局。这是Flexbox无法做到的。

用例

–Flexbox基本上是基于内容的。它倾听内容并适应它。网格更多的是在布局级别上操作，它是基于容器的，这意味着它基本上决定了结构。

因此，当您想要定义大规模布局时，cssgrid非常有用，而cssflexbox可以在更小的范围内用于灵活的元素。

Flexbox可用于缩放、单面对齐和组织容器中的元素。网格可以用来创建更复杂和微妙的设计布局，当块元素之间有间隙时。

css flexbox与css网格：比较图

总结 - css flexbox的(of css flexbox) vs. css网格(css grid)

CSS网格被设计用来做Flexbox做不到的事情，Flexbox仍然是开发人员做网格做不到的事情的最佳工具之一。嗯，网格不能处理整个页面的布局；实际上，它处理特定容器、页面上的一个容器以及与该容器直接相关的项的布局。当你想在一个方向上排列东西时，Flexbox实际上是很棒的。这意味着计算一次只能进行一行，浏览器一次只能处理一维的内容。网格有能力在两个方向上排列事物。Grid有能力在不改变标记的情况下改变布局的顺序。网格有一些强大的特性，这些特性改变了我们为web创建布局的方式。