css3 display:flex

問題描述

在移動端有三張圖片，其中有兩張的尺寸是一樣的，還有一張要比其它兩張小2px用flex怎么讓他們能自適應??? <p class='flexbox'> <p><a > <img src='http://img01.sephome.com/201512/E99EB7375ADB4E4CB717B30EEF130A61.jpg' alt='' width='100%'></a> </p> <p><a > <img src='http://img01.sephome.com/201512/2221C6D38DCF4E3DB0F6D5F5B4A31D1F.jpg' alt='' width='100%'></a> </p> <p><a > <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教程。