thymeleaf怎么让css的图片生效_解决css使用flex布局偶尔会踩的两个小坑

什么是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: 第二个坑很难发现，如果疑问，可以留言。。感觉不容易解释。