Flex布局到底解决了哪些痛点

早年进行网站布局时，float、inline - block、position到处都是。想要实现垂直居中？得先将父元素转变为table - cell。想要把三栏等分开？计算宽度算到对人生产生怀疑，还得担忧padding撑破容器。Flex布局出现以后，这些问题都顺利解决了。它的核心逻辑是，容器对项目排列方向、对齐方式以及空间分配加以控制，不再需要我们手动去计算每个元素的尺寸。

在实际进行开发期间，最为经常会被运用到的场景便是导航栏以及卡片列表了。举例来说，存在着一个响应式的导航，借助于Flex能够较为轻易地达成，使得logo处于左对齐的状态，菜单处于右对齐的状态。其核心代码仅仅只有一行：.nav { display: flex; justify-content: space-between； }。更为具备实用性的乃是flex-wrap属性，当屏幕出现缩小的情况时，它能够自动进行换行，相较于逐个针对断点运用媒体查询来展开调整，http://www.fouwan.com要省事许多。

可是Flex存在着容易出现意外状况的隐患，堪称较为典型的是子元素超出范围却不进行转行的问题，诸多使用者撰写-display:flex以后便盲目认为子元素会自行实现转行，然而最后的收场却是内容相互挤压在一起从而产生变形，相应采用的有效措非常直接便捷，那便是在容器中将 flex-wrap设定为wrap对子元素运用flex-basis来把控初始宽度，并给予相应限制。存在着另外一个常常会出现的问题，那就是子元素的高度并非保持一致，进而致使排列出现错乱的情况，而此刻运用align-items: flex-start这个样式或者stretch这个样式，便能够迅速地实现对齐。

Grid布局到底好在哪

Grid跟Flex之间最大的差异在于维度，Flex属于一维布局，它要么管控行，要么管控列，Grid呢则是二维布局，它能够同时对行与列进行控制，这相应地就表明在页面结构变得复杂的情形下，就像产品展示区需要同时去处理多行以及多列的时候，Grid在效率方面绝对要比Flex高出许多。

比如说有这样一个真实的场景，存在一个商品列表页，它要求每一行有四列，并且每个商品要占据四分之一的宽度，然而最后一个商品是要跨两列。要是使用Flex的话，就需要嵌套容器，并且还要借助伪元素来进行占位，代码不仅又臭又长。一旦使用Grid，仅仅只需要三行，如果设置display为grid，接着设置grid - template - columns为repeat（4, 1fr），然后给那个特殊商品添加grid - column: span 2就可以了。代码量直接砍半。

Grid的又一心仪功能是grid-template-areas，你能够借由文字去描绘布局区域，如同堆砌积木那般将页面划分成头部、侧边栏、主内容与底部，更改布局之际只是调节区域名称的位置，而无需对HTML结构予以改动，其对于后期维护以及A/B测试格外友善，程序员去修改CSS，设计师去调整区域映射，彼此互不干扰。

两者结合怎么用才不踩坑

不少人在Flex与Grid二者间拿捏不定，非得从中挑出一个，实际上它们并非相互对立，而是彼此互补。我的提议是：针对单行或者单列的元素排布，采用Flex，像是导航菜单、按钮组、表单里的输入框以及提交按钮。对于复杂区域或者需要跨行又跨列的情况，运用Grid，诸如页面骨架、商品网格、仪表盘面板。

实用的一种结合方式是，将Grid用作外部结构，把Flex用作内部细节 ，比如说，运用Grid把页面划分成左中右三栏，在每一栏的里面采用Flex去处理内容的排列对齐 ，如此这般既能确保整体结构的稳定，又能留存内部元素的灵活性。

请注意避开容易踩坑的情况：不要仅仅是为了去使用Grid而选择使用Grid。要是仅仅只是存在两三个元素进行水平排列这种情况，那么使用Flex方案会更加简洁。Grid的grid-gap（在新版中是使用gap的）确实是好用的，然而却需要留意旧浏览器呈现出的兼容性问题。要是客户提出要求要兼容IE11，那么最好采用Flex搭配负边距的方案，或者要准备好回退样式。另外，当Grid和Flex混合使用的时候要留意那层叠上下文以及z-index相关问题，尤其是当Grid项目内部包含了绝对定位元素之时，需要确认其中定位基准是不是正确的。