接觸h5已經有快一年了，因為一直偏向頁面重構所以在頁面布局方面也算是經歷過風風雨雨。所以總結一下自己用過的方法來比較歸納
首先來說，H5的頁面一般分為兩種，一種是用來做市場營銷的，主要特征是圖多，頁面較花哨圖片較多，一種是功能頁，功能頁顧名思義主要職能還是功能一般也是分為兩種：展示類和填寫類。今天主要說一下功能頁的填寫類頁面
填寫類的頁面一般會涉及三個部分：頁面標題，form表單以及提交按鈕
頁面標題&form表單
其實頁面標題和form表單一樣，一般的布局是左中右，即主頁-標題-返回等等，當然也有就只有標題的，這種就不做過多的介紹，下面主要說一下三欄布局
三欄布局實現起來的難點其實不在於如何一欄放三個元素也不在於如何讓三個元素按照 靠左、 居中、靠右的方式排列，而是如果中間的一欄如果是一個input框，如何讓這個input框可以充滿中間部分
為什么要這么說呢
如果只是要三個元素都排在一起這個是很簡單的，我可以都float，之后清除浮動就可以了。但是一旦都float起來，元素的寬度就變成了包含元素內容的寬度，即便是讓其display:block依然不能挽回
然后這個時候，我們的重點要登場了，對，flex，這個flex是個好東西實現了伸縮布局。什么叫做伸縮布局？就拿我們的三個元素橫排來說，我們的首項和尾項其實寬度是固定的，但是我們的中間項我們希望他可以充滿中間的位置
這個就是我們說的伸縮布局。而且，這樣一來不僅橫向還有縱向，比如我們的表單下方是個提交按鈕，我們希望它一直都在屏幕下方，但是表單又不會長度那么剛好那怎么辦呢？對，用我們的flex,什么position:fixed/absolute在flex 面前簡直就是歪門邪道。不過這個flex也不是省油的燈，前后出了三版應該是，我現在用的是第二版即display:box搭配flex:1,加完瀏覽器前綴兼容性可謂什么妖魔鬼怪什么美女畫皮什么刀槍火海什么陰謀詭計都擋不住我的flex的如意棒 遣送bug朝西去，抱歉有點high，總之就是好用的不得了；但是鑒於時代在發展，社會在進步，沒准哪天第二版會被完全淘汰，還是第二版（display:box）與第三版(display:flex)結合寫方是上策。
flex如何使用百度一下你就知道，只強調一下不管是縱向還是橫向伸縮，請確保伸縮對象的父容器伸縮的范圍是100%,即height:100%/width:100%,尤其是縱向布局需要把heml,body均height:100%才能奏效哦~
好，接下來說一下我今天新發現的一種布局方式，前方高能，注意把控好你的情緒，表太激動哦~
先來代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用table-cell</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
<style>
body {
background-color: #80ff80;
padding: 0;
margin: 0;
}
.child {
display: table-cell;
vertical-align: middle;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
}
.container {
padding: 10px 15px;
display: block;
background-color: #fff;
border-bottom: 1px solid #eee;
}
.middle {
width: 10000px;
}
</style>
</head>
<body>
<article>
<div class="container">
<div class="child">icon</div>
<div class="child middle">
<p>標題文字</p>
</div>
<div class="child">
<p>
說明文字
</p>
</div>
</div>
</article>
</body>
</html>
對，就是table-cell；父元素不用搞那么磨磨唧唧，直接就子元素table-cell；中間的元素給一個看似實現不了的較大的一個寬度；要注意子元素們一定要寫不換行的css，不然最右邊的元素會豎直顯示就像在table布局中一樣，無論怎么擠，只要寬度可以包含那就都給你放里面，實在。所以為了保證右邊的元素橫向顯示的逼格，讓他不能換行就美麗新世界了~
嗯，此處應該有掌聲~
因為還有別的開發任務先就寫這一個點，其他布局會找時間再更新，客官你莫急哦~