目前使用flex布局典型的**有天貓和網易新聞。
首先，利用flex的專案不需要對viewport進行縮放，直接：
簡單回顧一下flex的屬性
一、設定在容器上的屬性
1、flex-direction：屬性決定主軸的方向（即專案的排列方向）。
2、flex-wrap：預設顯示在一條軸線上，如果排不下如何換行。
3、flex-flow：flex-direction和flex-wrap的簡寫，預設為：row nowrap。
4、justify-cotent：在主軸上的對齊方式。
5、align-items：在交叉軸上的對齊方式。
6、align-content：定義了多條軸線的對齊方式，如果只有一條軸線，則不起作用。
二、設定容器裡面單個專案的屬性
1、order：定義專案的排序方式。
2、flex-grow：定義專案的放大比例，預設為0。
3、flex-shrink：定義專案的縮小比例，預設為1。
4、flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
5、flex：flex-grow、flex-shrink、flex-basis的縮寫。
6、align-self：允許單個專案有與其他專案不一樣的對齊方式
具體的屬性資訊可以檢視阮一峰寫的flex布局教程(
注： place-content屬性是align-content和justify-content屬性的簡寫屬性。
先來看一下天貓布局：
其整個頁面都是flex布局，margin\padding\width\height等屬性的值都是用px。
我挑選了天貓首頁的某一塊布局，寫了乙個demo(寬度寫死為iphone8的尺寸375px)，大致如下 ：
模組分明，清爽靈活。
再來看一下網易新聞：
網易新聞移動端適配也是採用flex布局，和天貓不同的是width\height\padding\margin等屬性值用的是rem。
其設計稿為750px，1rem為100px。
以iphone8為例：devicewidth = 375，font-size = 375 / 7.5 = 50px，1rem為50px
相容性處理：
安卓4.4以下的手機不支援flex布局。所以要做好相容工作。
注意在寫flex的時候加上：
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;複製**
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
flex移動端 布局
在移動端中，一般用flex布局來解決當螢幕適應時出現布局錯亂的現象 步驟 1，在開始階段先開啟flex布局，就是在父盒子上display flex 開啟flex布局 而且flex都是對父元素操作來影響子元素的，這裡的子元素是一級子元素，只能影響一級子元素，而且是 所有的一級子元素，其中有幾個重要且常...
移動端布局方式 flex布局
1 justify content屬性 左右居中 justify content屬性定義了專案在主軸上的對齊方式。justify content flex start flex end center space between space around flex start 預設值 左對齊 flex...