flex 布局和 grid 布局的区别

flex 和 grid 是两种常用的 CSS 布局模型，它们在实现页面布局时有一些区别：

① 定位方式：

Flex布局：?Flexible Box的缩写，也成为?弹性盒子布局。

它是2009年由 W3C 提出的新的布局方案，可以响应式地实现各种页面布局，目前 Flex 技术已经得到了所有浏览器的支持。

所有的项目都是依托于两个轴进行位置排列的，所以可以把Flex布局看成是一种"轴线布局"?

从维度的角度上看，Flex布局是一维布局模型，主要针对单行或单列的布局需求，通过设置容器和子元素的属性来控制布局方向、对齐方式和分布方式。

?

Grid布局：又称为 网格布局

它是微软于 2010 年提出的一种新的布局方式，于2016 年提交了该布局的草案。经过近几年发展，兼容性越来越好。

Grid布局是二维布局模型，可以创建复杂的网格结构，通过定义容器中的行和列来布局子元素，可以更精确地控制元素的位置和大小。

?

② 布局方式：

Flexbox 通常用于构建灵活的、自适应的布局，使得元素能够在一条轴线上自动伸缩和换行，适用于构建响应式布局和水平/垂直居中等场景。

Grid 可以创建复杂的网格结构，可以将页面分割为多个区域，并通过网格线来放置元素，适用于构建复杂的栅格化布局和定位布局的需求。

③?兼容性：

Flexbox 的兼容性较好，主流浏览器都支持，但在某些旧版本的浏览器中可能需要加上浏览器前缀。

Grid 的兼容性相对较新一些，部分旧版浏览器可能不支持或需要加上浏览器前缀。

?

总结：

综上所述，

Flexbox 适用于一维布局的场景，用于构建自适应和灵活的布局；

而 Grid 适用于二维布局的场景，用于构建复杂的网格结构和定位布局。

在实际开发中，可以根据具体需求选择合适的布局模型。