在移動端中，一般用flex布局來解決當螢幕適應時出現布局錯亂的現象：
步驟：1，在開始階段先開啟flex布局，就是在父盒子上display：flex；開啟flex布局；
而且flex都是對父元素操作來影響子元素的，這裡的子元素是一級子元素，只能影響一級子元素，而且是
所有的一級子元素，其中有幾個重要且常用的屬性：justify-content:flex-start(主軸開始的地方)；flex-end(主軸結束的地方)；
flex-basize（基線地方）；center（中心的地方），最重要的兩個屬性：space-between兩邊留白和space-around兩邊不留白；
2，配置側軸的樣式;align-items：當不換行的時候主軸只有一根，當換行的時候align-content：主軸有多根時候的屬性
3，主軸方向，有時候我們可以靈活的應用主軸，通過flex-direction來控制，主要的兩個屬性row（預設）和clumn（垂直）
4，預設時不換行的，當需要進行換行運算元，flex-wrap：wrap，為換行（預設是no-wrap不換行）
這樣的布局一般是通過設定每乙個列的寬度一般百分之三十；讓li——float：left
這是要開啟換行：flex-wrap：wrap換行(預設為no-wrap不換行)
justify-content：space-around
align-content：center
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...
移動端布局方式 flex布局
1 justify content屬性 左右居中 justify content屬性定義了專案在主軸上的對齊方式。justify content flex start flex end center space between space around flex start 預設值 左對齊 flex...