使用Flex弹性布局解决浮动元素无法将高度设为100%

发布日期:

很久没认真的写过CSS了,今天发现一个问题,是我这个网站主题上的,这个主题很老,用的table布局,给各种宽度的设备都设置了不同的样式,看的我真的很难受,之前是这样的:

给不同宽度的设备设置了不同的元素宽度,这是很久以前的写法,我刚开始是将它全部改成百分比浮动写法,当然这种方法也没有特别高级,但是也可以省掉很多重复代码
然后就牵涉到一个问题:**如果将浮动元素的高度设置为父元素的高度?**
我在 [css – 让浮动元素高度等于父元素高度 – SegmentFault 思否](https://segmentfault.com/q/1010000004516026) 中看到一个解决办法,是将浮动元素再套一个元素然后设置内元素绝对定位即可,但是这种方法有一个弊端就是,要设置为父元素高度的浮动元素不能高于另一个浮动元素,否则无法显示,试了很多种办法的确如此
说实话用上面那种办法我已经很不情愿了,我以前可从来不用position的,更不说absolute这种将元素脱离于文本流之外的写法我是很鄙夷的
怎么办呢?当然,如果你硬要在float上解决也不是没办法,随便加个有高度的元素或者设置另一个元素的min-width都行,但是我怎么可能用这种恶心的写法呢
然后我就想到这**完全可以用css3的flex弹性布局**,那个问题是2016年提的,也许是那时候flex布局还不够普遍把
很多时候不是技术不好,完全是脑子不转弯,不愿意去尝试新事物,唉,我也是如此,即便很早就会使用flex,但遇到问题还是喜欢先用自己经常用的方法去解决,放着更好的方案不用