問題：爲什麼在display：flex下，overflow不起作用？
解決方法：
使用display：box，display： box是一種古老的寫法，現在基本廢棄，可用display: -webkit-box; 兼容
使用flex佈局：flex佈局的默認值，子元素有flex-shrink：1，在這個默認值下，子元素的寬是不管用的。將子元素加上flex-shrink：0；
移動端問題：
安卓和iOS瀏覽器都是webkit內核，包括變態UC瀏覽器，對flex支持並不好，但卻都支持古老的display：webkit-box；所以在這種情況下，要使用box佈局。所以移動端的一定要加瀏覽器前綴！！display: -webkit-box;
display: -webkit-box;可伸縮框屬性（Flexible Box）
css3新添加的盒子模型屬性做到真正的流體佈局
overflow
overflow 屬性規定當內容溢出元素框時發生的事情
display 、flex
display 屬性規定元素應該生成的框的類型
flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性display:flex 是一種彈性佈局佈局方式。它即可以應用於容器中，也可以應用於行內元素。是W3C提出的一種新的方案，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持
overflow:auto的潛在佈局隱患
1.滾動條會佔用容器尺寸，原本和諧的佈局，可能因爲滾動條出現後發生問題（儘量使用自適應佈局，或者預留滾動條的寬度）
2.水平居中跳動的問題（滾動條出現時，水平居中是內容會發生移動，這樣頁面切換時，會產生內容上的跳動感）
簡單示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.boxes{
width: 500px;
height: 400px;
display:-webkit-box;
overflow-x: auto;
flex-direction: row;
border: 1px solid black;
}
.boxes>div{
width: 200px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="boxes" id="boxes">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="val"></div>
</body>
<script type="text/javascript">
//監聽滾動條滾動
//獲取對象
var boxes=document.getElementById("boxes");
boxes.addEventListener("scroll", function (e) {
console.log(JSON.stringify(e));
var w=boxes.scrollLeft;
document.getElementById("val").innerHTML="滾動距離："+w+"總長度："+boxes.scrollWidth;
});
</script>
</html>