css3 display:flex

问题描述

在移动端有三张图片，其中有两张的尺寸是一样的，还有一张要比其它两张小2px用flex怎么让他们能自适应??? <p class='flexbox'> <p><a href='http://m.vmei.com/brand/group/1000284'> <img src='http://img01.sephome.com/201512/E99EB7375ADB4E4CB717B30EEF130A61.jpg' alt='' width='100%'></a> </p> <p><a href='http://m.vmei.com/brand/group/1000284'> <img src='http://img01.sephome.com/201512/2221C6D38DCF4E3DB0F6D5F5B4A31D1F.jpg' alt='' width='100%'></a> </p> <p><a href='http://m.vmei.com/brand/group/1000421'> <img src='http://img01.sephome.com/201512/975A099F4CDE42FAAD13FD89002341A0.jpg' alt='' width='100%'></a> </p></p> .flexbox{ display: flex; display: -moz-box; display: -webkit-flex;}.flexbox p{ float: left;}.flexbox p:nth-of-type(1),.flexbox p:nth-of-type(3){ flex:1;}

问题解答

不是很明白~~是想让三张图片水平放置并平分位置吗？如果是这样，只要改成这样：

.flexbox{ display: flex; display: -moz-box; display: -webkit-flex; } flexbox p{ float: left; flex:1; }回答2：

图片小2px和flex没啥关系的。flex应用到容器和每个容器item，图片只要控制max-width/max-height就行了。

.flexbox{ display: -webkit-flex; display:flex } .flexbox p{ -webkit-flex:1; flex:1;} .flexbox p:nth-of-type(3){ padding-left:2px;}

flex是不需要float的，建议看看阮一峰老师的flex教程。