关于H5填写信息类页面横向布局总结
接触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布局中一样，无论怎么挤，只要宽度可以包含那就都给你放里面，实在。所以为了保证右边的元素横向显示的逼格，让他不能换行就美丽新世界了~
嗯，此处应该有掌声~
因为还有别的开发任务先就写这一个点，其他布局会找时间再更新，客官你莫急哦~
