前言
之前总结过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布局虽然好用,但是其也有后遗症,根据业务场景选择合适的解决方案才是最合理的。