Grid与Flex如何选择
Posted zyktbs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Grid与Flex如何选择相关的知识，希望对你有一定的参考价值。
Grid又称栅格布局 目前仅在Google、Safari、Firefox可以看到效果 若需要兼容IE等其他浏览器请自行查找方法或者使用Flex布局
Grid属性详细讲解可以移步W3C
Grid适用于布局比较大的场景 因为使用Gird可以让页面的布局变得非常容易 甚至可以处理一些不规则和非对称的设计
Flex又称弹性布局
Flex属性详细讲解可以移步阮一峰大神的博客
Flex适合行内元素内部的内容 可以使用Flex进行某一行或列内元素的设计 如导航条、菜单栏等
如何选择Flex或是Grid呢？
- 行列都需要的设置的布局适合使用Grid
- Flex适用于单一行或列的布局
- 个人理解 Grid与Flex最大区别在于 Grid布局能够对某一行内的某一列进行大小控制 而Flex布局如若一行或列内只有一个子元素便不方便单独设置 即可以理解为Grid就像excel表格那样可以控制每个单元格的大小 因此选择何种布局先取决于是否需要兼容 再者取决于设计内容属于一维或是二维的 当然也可以使用Flex来实现Grid的效果 whatever you like
Flex与Grid的详细区别可以移步W3C
以上是关于Grid与Flex如何选择的主要内容，如果未能解决你的问题，请参考以下文章