fix flex display issue. code review by LZF

@@ -37,19 +37,28 @@ function hiddenTips($ele) {
     }
 }
 
-function isFlexSupport() {
-    var flex = document.createElement('p').style.flex,
-        webkitFlex = document.createElement('p').style.webkitFlex,
-        flexWrap = document.createElement('p').style.flexWrap;
-
-    if ((flex === '' || webkitFlex === '') && flexWrap === '') {
-        return true;
-    } else {
-        return false;
-    }
+//function isFlexSupport() {
+//    var flex = document.createElement('p').style.flex,
+//        webkitFlex = document.createElement('p').style.webkitFlex,
+//        flexWrap = document.createElement('p').style.flexWrap;
+//
+//    if ((flex === '' || webkitFlex === '') && flexWrap === '') {
+//        return true;
+//    } else {
+//        return false;
+//    }
+//}
+
+function wrapElements(selector, count) {
+    $(selector).each(function(idx, el) {
+        if (idx % count === 0) {
+            $($(selector).slice(idx, idx + count)).wrapAll($('<div class="js-wraper"></div>'));
+        }
+    });
 }
 
 
+
 function search() {
     if (searching || end) {
         return;
@@ -84,9 +93,10 @@ function search() {
             hiddenTips($('#size-swiper-container'));
             hiddenTips($('#reference-swiper-container'));
 
-            if (!isFlexSupport()) {
-                $('.detail .column').removeClass('column').addClass('oldbox');
-            }
+            //if (!isFlexSupport()) {
+            //    $('.detail .column').removeClass('column').addClass('oldbox');
+            //}
+            wrapElements('.detail .column', 2);
             searching = false;
             end = true;
             loading.hideLoadingMask();

@@ -41,50 +41,53 @@ $basicBtnC:#eb0313;
             }
 
             &.table {
-                @include flexbox((
+                .js-wraper {
+                    @include flexbox((
                     display: box,
                     box-lines: multiple,
                     box-pack: start
-                ), $version: 1);
-                @include flexbox((
-                    display: flex,
-                    flex-wrap: wrap,
-                    justify-content: flex-start
-                ));
-                width: 100%;
-                .column {
-                    box-sizing: border-box;
-                    //padding: pxToRem(20px) pxToRem(12px);
-                    padding: pxToRem(6px) 3%;
-                    width: 49.9%;
-                    border: 1px solid #fff;
-                    font-size: pxToRem(24px);
-                    background-color: $tableCellC;
-                    word-wrap: break-word;
-                    @include flexbox((
-                        box-flex: 1.0,
-                        display: box,
-                        box-align: center
-                    ), $version: 1);
-                    @include flexbox((
-                        display: flex,
-                        align-items: center,
-                        flex-basis: 49.9%
-                    ))
-                }
-                .oldbox{
-                    padding: pxToRem(6px) 3%;
-                    width: 49.9%;
-                    background-color: $tableCellC;
-                    box-sizing: border-box;
-                    border: 1px solid #fff;
-                    width: 49.9%;
-                    height: 100%;
-                    float: left;
-                    text-overflow:ellipsis;
-                    white-space:nowrap;
-                    overflow:hidden;
-                }
+                     ), $version: 1);
+                     @include flexbox((
+                         display: flex,
+                         flex-wrap: wrap,
+                         justify-content: flex-start
+                     ));
+                 }
+                     width: 100%;
+                     .column {
+                         box-sizing: border-box;
+                         //padding: pxToRem(20px) pxToRem(12px);
+                         padding: pxToRem(6px) 3%;
+                         width: 49.9%;
+                         border: 1px solid #fff;
+                         font-size: pxToRem(24px);
+                         background-color: $tableCellC;
+                         word-wrap: break-word;
+                         @include flexbox((
+                             box-flex: 1.0,
+                             display: box,
+                             box-align: center
+                         ), $version: 1);
+                         @include flexbox((
+                             display: flex,
+                             align-items: center,
+                             flex-basis: 49.9%
+                         ))
+                     }
+                     .oldbox{
+                         padding: pxToRem(6px) 3%;
+                         width: 49.9%;
+                         background-color: $tableCellC;
+                         box-sizing: border-box;
+                         border: 1px solid #fff;
+                         width: 49.9%;
+                         height: 100%;
+                         float: left;
+                         text-overflow:ellipsis;
+                         white-space:nowrap;
+                         overflow:hidden;
+                     }
+
             }
         }
     }