/*---仿-table---*/.flex-out{ /*display: -webkit-box;*/ /*放在第一行不能适应电脑游览器，手机无问题。*/ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */}.flex-in{ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }<div class="flex-out"> <div class="flex-in" style="width:46%;"> <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_04.jpg" width="100%" > <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_06.jpg" width="100%" > </div> <div class="flex-in" style="width:54%;"> <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_05.jpg" width="100%" > </div></div> 代码如上,需求很简单只要让上面的这组div能实现table的效果就好；让手机能实现适应多种屏幕的大小，图片被设置成了100%；
出现的问题在于pc的游览器和手机游览器显示效果不同，但是把 display: -webkit-box; 移动到最后一行是无问题的。
我知道为什么这样可行，但是我不知道这样修改后会不会引发别的什么问题（经过测试是没问题的），但是感觉样式还是怪怪的。希望谁能回答下我的几个问题
- display：flex；具体运用在什么方法面
- 我现在这样写会引发什么问题
- 上面这个样式的由来
解决方案
display：flex;是一种 CSS3 属性，用于多行多列布局，类似 table，但是有更大的灵活性。目前移动端只有最新的浏览器支持，如 Chrome、Firefox等。Android 4.1 的内置浏览器不支持，微信浏览器使用的 WebView 等都只有在最新的系统上才支持，如 4.3、4.4 等，具体细节你可以再去确定。display: -webkit-box;是一种特别适合微信内置浏览器的布局方式。移到最后一行没有问题，是因为这时候
display: -webkit-box;会把前面的display: flex;覆盖掉。