背景分析：最近做移動端項目時，遇到一個常見的需求：
可以滑動的導航，如下圖
雖然是很常見的一個布局，但在移動端沒有做過，想當然的寫下以下的樣式，簡單描述下：
父元素
width：100%；
overflow: hidden;
overflow-x： scroll；
子元素
float：left
瀏覽器刷新后，我擦，並不好使，折行了···
停下來想想，看看那手百是怎么實現的：
overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; display: -webkit-box; display: box;
使用的是display：box，將手百的樣式復制粘貼，嗯，項目好使了。但干活的時候不能只考慮實現業務邏輯，要把背后的原理搞明白。
網上對display：box的描述大多數是：display： box是一種古老的寫法，現在基本廢棄，使用flex布局。
嘗試用flex代替手百寫的box布局；
父元素樣式：
overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex;
結果發現子元素都擠一起了，本能反應的給子元素加了個寬，然並軟。
意識到flex布局的默認值，子元素有flex-shrink：1，在這個默認值下，子元素的寬是不管用的。將子元素加上flex-shrink：0；搞定了。
完美解決，趕緊用到自己的項目里！
美滋滋的讓qa一測，發現問題了：
在低版本安卓中，並不能正常顯示。
最后排查發現：
安卓和iOS瀏覽器都是webkit內核，包括變態UC瀏覽器，對flex支持並不好，但卻都支持古老的display：webkit-box；所以在這種情況下，要使用box布局。所以移動端的一定要加瀏覽器前綴！！
box布局和flex布局並不能簡單替換，他倆就不是一個玩意，親測。最直觀的區別就是布局之后，子元素是否會縮水。
關於二者的詳細屬性，不贅述，網上太多。最后說說常見的面試題，用兩種新屬性的寫法。
子元素上下左右居中顯示：
使用display：box
只需要父元素添加以下樣式：
display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
使用display：flex
需要父元素添加以下樣式：
display: flex; justify-content: center; align-items: center;
最后總結：
網上得來終覺淺，絕知此事要編程！