什么是flex布局
2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了。什么是flex布局以及它的好处,这里就不再赘述,如果还没有学的话,可以搜索阮一峰大佬的 flex 布局攻略。
坑1,图片失真
如果父元素设置为 display: flex,且其子元素为图片的话,则图片设置宽高,但宽高不生效出现失真问题,这个问题我在H5和微信小程序中都有发现。
eg:
解决方法有两个;
1、在图片外层包裹一层元素,比如原结构为:
改为:
感觉这种不是很,好,无故多了一层元素结构,所以推荐使用第二种:
2、给父元素下的图片子元素改为:
这样就可以啦!
justify-content: center;不生效
当父元素设置display:flex,其子元素设置flex:1平分父元素宽度之后,再给子元素设置flex ,justify-content: center;无法对子元素下的有定位子元素生效。
eg:
weex:
css(weex中默认每个元素都有默认display: flex):
解决方法,将 flex:1 ,改为 固定宽度。。。
ps: 第二个坑很难发现,如果疑问,可以留言。。感觉不容易解释。