前言

之前总结过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 布局以后,子元素的floatclearvertical-align属性将失效。比如字体对其失效的方案就是设置行高,vertical-align:bottom;我们可以继续用,但是可以通过设置行高的方式让文字内容对齐等。

小技巧

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

总结

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

最后修改:2021 年 06 月 10 日 08 : 20 PM
本文作者:博主:    
文章标题:使用flex布局后遗留下来的部分问题及解决方案
本文地址:https://www.iftiger.com/archives/121.html     
版权说明:若无注明,本文皆为“泰戈尔のBlog”原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。