grid布局兼容性问题（grid布局和flex布局）



相信写过前端对齐布局的前端都知道 Flex 布局，它是一种轴线布局，指定“项目”针对轴线的位置，针对行对齐、列对齐（居中对齐、两端对齐）这些布局场景使用 Flex 布局是一种非常常见且高效的方法。Grid 布局则是将容器分成“行”和“列”，产生单元格，然后指定“项目”所占的单元格，远比 Flex 布局更强大。

跟 Flex 布局类似，Grid 也有两种属性：容器属性和项目属性。

grid-template-columns 划分列

1. 固定列 ，“项目”会自动撑满容器高度
   
2. 当容器宽度未知时， 第一个参数将无法得知，可以使用 它会自动以一列 宽度显示，若容器宽度400就展示4列，若容器宽度500就展示5个，无需手动计算设置。
   
3. 设置不同列为不同宽度

四列宽度分别为

4. 比例片段

列宽分成7份，各列占比为

5. 长度范围 minmax()

6. 浏览器自动分配 auto

grid-gap / grid-column-gap 间距

简写方式：

justify-items(水平方向) / align-items(垂直方向) 单元格内容的对齐方式

简写方式：

justify-content(水平方向) / align-content(垂直方向) 整个内容区域的对齐方式

占单元格从 grid-column-start / grid-row-start 到 grid-column-end / grid-row-end

1. 合并单元格行或列

简写方式：

2. 合并单元格区域

简写方式：

justify-self(水平方向) / align-self(垂直方向) 项目对齐方式

简写方式：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/54883.html