前言

之前总结过flex布局的一些属性、排列方式等。最近在使用在写页面的时候偷懒没有用到定位的方法。而是采用flex布局的方式去写，这样就很方便。可以自由的设置内容的排列方式，不必对每个元素进行定位。其实是自己很久没有写过样式了，反过头来调整样式真的头大。

遇到的问题

而我似乎忘记了flex的后遗症，于是成功的掉进了这个坑里。

场景

当我们单纯的在页面展示flex布局的内容时，就很简单，但是如果在页面需要展示tab栏切换的场景时，首先我们需要先隐藏其他若干的tab的内容，只显示默认显示的那个，但是我通过几种方式都没有成功将其他的tab内容隐藏。

尝试解决问题

我尝试了几种方法，
1.给标签设置hidden属性。
比如我们给其标签上设置hidde属性，但是其并不会隐藏，

2.给父级元素设置display:none;
后来又想到给他设置display:none;但是display属性和flex布局属性冲突了，我们可以看到设置之后该属性直接被划掉了，而且先后顺序有问题的话，flex布局也会失效。

3.设置display:none !important;
然后直接增加该属性的权重。会发现当点击tab栏切换的时候直接隐藏了不显示了，

4.设置标签的行内样式style="display: none"
最后想到了给标签设置行内样式看看可行否。

可以看到默认显示的下方已经隐藏了，

而且点击其他的时候也不会出现flex布局失效的场景。

其他问题

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。比如字体对其失效的方案就是设置行高，vertical-align:bottom;我们可以继续用，但是可以通过设置行高的方式让文字内容对齐等。

小技巧

其实我们在使用flex布局的时候，如果记不住太多的属性，我们可以先给父元素设置display：flex；然后我们打开浏览器审查刚才的元素，直接在浏览器预览想要的排列方式，等到确定自己想要的排列方式之后，直接可以复制标签下所有的flex属性粘贴进代码编辑器里。这样很方便。

总结

flex布局虽然好用，但是其也有后遗症，根据业务场景选择合适的解决方案才是最合理的。