HTML

grid和flex区别是什么#xff1f;适用什么场景#xff1f;

Flexbox

是二维布局系统通常用于整个页面的规划。

二者从应用场景来说并不冲突。

虽然

Flexbox

固定和灵活的轨道尺寸可以使用行号名称或通过定位网格区域将项目放置在网格上的精确位置可以将多个项目放入网格单元格或区域中它们可以彼此部分重叠。

缺点

简单画一张图

grid-column-gapgrid-row-gapgrid-gap我们之前使用的弹性布局

而现在的grid布局网格布局可以更自由的去设置一个容器所站的位置

如果使用flex布局去实现排版方法就需要嵌套很多个div去一块一块的区分这些

而现在使用grid布局的话可以省下很多div的布局直接将元素所站的位置区分开

基础示例

contentwidthdevice-widthtitlegrid/titlestylebody

{width:

152);}.container{display:grid;gap:20px;grid-template-columns:1fr

2fr

classcontainerdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/div/div/body/html

我们只需要在父元素中添加display:grid;属性其元素下的子元素就会跟着变

如图所示这种布局方式使用弹性布局来实现相对来说是比较麻烦的但我们使用grid布局就简单很多了

代码如下

fr单位是frid布局专用的长度单位可以平均的区分配每个容器所站的位置

*//*

每列改怎么去分配位置例如菜单和内容区side这里定义的是菜单那么他就占用1fr的位置content内容他占3fr的位置所以在图中我们可以看到内容区要比菜单区域更宽一些

*/gap:

20px;grid-template-areas:header

header/*

*/header{grid-area:header;}footer{grid-area:footer;}aside{grid-area:side;}article{grid-area:content;}header,footer

{border-radius:

classcontainerheader这是头部导航/headerarticleh1这里内容区域/h1p内容1/pp内容2/p/articleasideh2这里是左侧菜单区域/h2p菜单/p/asidefooter这里是底部/footer/div/body

/html

布局有一定的相似性都可以指定容器内部多个项目的位置。

但是它们也存在重大区别。

Grid