摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。

所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱

我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。

正常文檔流（Normal Flow）：正常布局流是指在不對頁面進行任何布局控制時，瀏覽器默認的HTML布局方式。默認的文檔流，確保在沒有任何css樣式的時候，還能夠正確的渲染和顯示內容。使頁面具有比較好的可讀性以及合理性。(position display float table flex-box grid-layout)
默認情況下，元素是如何布局的？ （引用自 https://developer.mozilla.org）
首先，取得元素的內容來放在一個獨立的元素盒子中，然后在其周邊加上內邊距、邊框和外邊距。(盒子模型）
一個塊級元素的內容寬度默認是其父元素的100%，其高度與其內容高度一致。行內元素的height width與內容一致。你無法設置行內元素的height width。 如果你想控制行內元素的尺寸，你需要為元素設置display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)
那獨立元素之間又是如何相互影響的呢？ 正常布局流是一套在瀏覽器視口內放置、組織元素的系統。默認情況下，塊級元素按照在文檔中書寫出現的順序放置 --- 每個塊級元素會在上一個元素下面另起一行，它們會被設置好的margin 分隔。
行內元素的表現有所不同 --- 它們不會另起一行；只要在其父級塊級元素的寬度內有足夠的空間，它們與其他行內元素、相鄰的文本內容（或者被包裹的）被安排在同一行。如果空間不夠，溢出的文本或元素將移到新的一行。
如果兩個相鄰的元素都設置了margin 并且兩個margin有重疊，那么更大的設置會被保留，小的則會消失 --- 這被稱為外邊距疊加。

我們在傳統的css布局當中，不管是css2還是css3，大致囊括了靜態布局、流式布局、彈性布局、自適應布局、響應式布局、網格布局。對于css的這些布局方式，在小程序中又是怎樣的呈現方式呢？我們分別來看一看。

固定寬度布局。寬度以像素為單位。（當然我們還可以使用其他的絕對長度單位）
缺點：無論窗口多大，尺寸不變。無法充分利用空間。行長和文本易讀性不好。
靜態布局就是傳統的網站形式：對于PC設計一個居中布局，窗口縮小時，內容被遮擋，呈現橫豎向滾動條。對于移動設備，多帶帶建立一個m.域名及相應的移動網站。

靜態布局在小程序中一般很少出現。因為如果使用靜態布局，就無法做到不同屏幕自適應，750px的設計稿在小屏幕的手機上就會出現滾動條。

呈現效果如下：

// wxml 代碼

  靜態布局
  
    靜態布局內容部分在小程序中的呈現。小程序page樣式在overflow-x
上默認是hidden。
  



//樣式如下
page {
  overflow-x:scroll;
}
.page, .header, .content {
  width: 750px;
}
.content {
  background: #ccc;
}

流式布局是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。
使用百分比實現：流式布局能夠相對于瀏覽器窗口進行伸縮。
缺點：窗口寬度較小，行變得非常窄，很難閱讀。需要設置min-width來解決，但是如果min-width較大的話，也會有靜態布局相同的限制。寬度太寬，同樣會存在行長過長的問題。
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。

我們來看看在小程序中使用流式布局的效果：

在不同的屏幕大小下呈現出來的效果如下：

  流式布局
  
  
    
      
        我是左側部分
      
      
        我是右側部分
      
    
    
     
      
        我是左側部分
      
      
        我是中間部分
      
      
        我是右側部分
      
    
  

/* css代碼 */
.fluid, .content, .wrapper {
  width: 100%;
  box-sizing: border-box;
}
.wrapper {
  height: 200px;
  margin-bottom: 20px;
}
.wrapper .grid-item {
  height: 100%;
  background: #ccc;
  display: inline-block;
  box-sizing: border-box;
}
.wrapper .grid-half {
  width: 48%;
}
.wrapper .grid-half:nth-child(2n) {
  margin-left: 4%;
}
.wrapper .grid-three {
  width: 32%;
}
.wrapper .grid-three:not(:first-child) {
  margin-left: 2%;
}

CSS 彈性盒子布局是 CSS 的模塊之一，定義了一種針對用戶界面設計而優化的 CSS 盒子模型。在彈性布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。通過嵌套這些框（水平框在垂直框內，或垂直框在水平框內）可以在兩個維度上構建布局。

對Flex的理解可以參考阮一峰 Flex 布局教程：語法篇。在此不做詳細說明。那我們看看在小程序中Flex布局的使用。依然還是上一個例子中的wxml，我們只需要修改對應的class以及css即可。

  流式布局
  
  
    
      
        我是左側部分
      
      
        我是右側部分
      
    
    
     
      
        我是左側部分
      
      
        我是中間部分
      
      
        我是右側部分
      
    
  

/* css 代碼*/
.wrapper {
  display: flex;
  height: 200px;
  margin-bottom: 20px;
  justify-content: space-between;
}

.wrapper .grid-item {
  height: 100%;
  flex: 1;
  background: #ccc;
}

.wrapper .grid-item:not(:first-child) {
  margin-left: 10px;
}

我們能夠看到與流式布局顯示出來的效果是有一定的差別的，在item之間的margin值，我們可以設定一個固定值，而不用去考慮item寬度的變化。而流式布局中想要實現這樣的效果，只要想改變中間的間距，我們都需要重新計算下item的寬度。當然在上一個流式布局的例子中還可以配合float或者使用padding來實現這一點。

自適應布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨窗口大小的調整發生變化。在pc以及移動端都可能涉及到的布局當中，我們可以使用媒體查詢來實現不同屏幕分辨的布局。示例

響應式布局（Responsive）的特點是分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。
可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

CSS 網格布局擅長于將一個頁面劃分為幾個主要區域，以及定義這些區域的大小、位置、層次等關系（前提是HTML生成了這些區域）。
像表格一樣，網格布局讓我們能夠按行或列來對齊元素。 然而在布局上，網格比表格更可能做到或更簡單。 例如，網格容器的子元素可以自己定位，以便它們像CSS定位的元素一樣，真正的有重疊和層次。詳情請參考阮一峰 CSS Grid 網格布局教程

我們來看示例，如何實現一個三行三列的布局？n行n列呢？

  
    Grid 布局
  
  
    
      
        1
      
      
        2
      
      
        3
      
      
        4
      
      
        5
      
      
        6
      
      
        7
      
      
        8
      
      
        9
      
    
  

.wrapper {
  display: grid;
  /* grid-template-columns: 100px 100px 100px; */
  /* grid-template-columns: repeat(3, 100px); */
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100px 100px 100px; */
  /* grid-template-rows: repeat(3, 100px); */
  grid-template-rows: repeat(3, 100px);
}

.grid-item {
  background: #ccc;
  margin-top: 10px;
}

.grid-item:not(:nth-child(3n+1)) {
  margin-left: 10px;
}

視口百分比長度定義相對于viewport的大小的值，即文檔的可見部分。
vw: 視口寬度的1/100;
vh: 視口高度的1/100;
vmin: 視口高度和寬度之間的最小值的 1/100。
vmax: 視口高度和寬度之間的最大值的 1/100。

實現3行3列的示例：

  
    vw、vh單位
  
  
    
      
        1
      
      
        2
      
      
        3
      
      
        4
      
      
        5
      
      
        6
      
      
        7
      
      
        8
      
      
        9
      
    
  

.page {
  padding: 5vw;
}
.grid-item {
  width: 28vw;
  height: 28vw;
  background: #ccc;
  display: inline-block;
  margin-bottom: 2vw;
}
.grid-item:not(:nth-child(3n+1)) {
  margin-left: 3vw;
}

在小程序中我們更多考慮的是移動設備顯示的效果，不會涉及到媒體查詢的使用。所謂的自適應是指在page中的元素在不同移動設備中的自適應。具體實現，可以使用微信小程序的rpx單位，以及使用定位、浮動、Flex、Grid布局來實現。

在這里我只是涉及到了各種布局的基本用法，其實每一種布局仔細研究起來都有很多需要講解的東西，因為各種布局里面很多屬性和特性都沒有涉及到。在我們實際應用中也會有各種布局需求。所以希望大家在實際使用的時候在深入的進行了解。

另外，正如這篇文章的標題所述，css布局在小程序的應用，我們在h5頁面中的布局可以說各式各樣，有不同的解決方案。這些布局概念一些是指某一類布局的概括，有一些是指css可以實現的布局方式。

那在小程序中一般使用默認的rpx單位來對布局、字體大小做定義。在以上的例子中都沒有使用到微信的rpx單位，關于rpx的理解，可以參照小程序官方文檔。rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。目的就是為了在不同的屏幕分辨率下做到自適應。

作者：易企秀——飯等米