Grid与Flex如何选择

标签：使用   lan   for   行内元素   targe   hat   tps   单元   ati   

^{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如何选择

标签：使用   lan   for   行内元素   targe   hat   tps   单元   ati   

原文地址：https://www.cnblogs.com/zyktbs/p/8832143.html