上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题，当然，这个问题我也在百度中搜索过，基本搜索出来的答案都是这样描述的，我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局，是会损耗性能的，但是百度中却没有给出我所想表达出的解决方案，所以不得不在此将该方案具体的描述清楚。
首先，我需要介绍的是display:box这个属性，它是今天弹性布局的主角，虽然它有个更加强大的弟弟display:flex，但是由于手机浏览器的兼容性问题，现在任然不太提倡使用这个属性，当然，如果你的项目只运行环境在高版本浏览器中，用flex会更加理想，有时间的博友可以好好关注这个属性。
言归正传，display:box俗称弹性盒模型，早在2011年的时候其实就在移动端保持着良好的兼容性了，它有如下几个特性：
box-orient（用于设置盒模型内部元素的排列方式）
- inline-axis：从左向右排列（默认值）
- horizontal：水平排列
- vertical：垂直排列
- block-axis：从上向下排列
box-pack （用于设置子容器在水平框中的水平位置，以及垂直框中的垂直位置）
- start ：所有子容器都分布在父容器的左侧，右侧留空
- end ：所有子容器都分布在父容器的右侧，左侧留空
- justify ：所有子容器平均分布（默认值）
- center ：平均分配父容器剩余的空间（全局居中的效果）
box-align （用于规定如何对齐框的子元素）
- start ：子容器从父容器顶部开始排列
- end ：子容器从父容器底部开始排列
- center ：子容器横向居中
- baseline ：所有子容器沿同一基线排列
- stretch ：所有子容器和父容器保持同一高度（默认值）
box-flex（指定box的子元素是否灵活或固定的大小，使用数字进行比例分配）
介绍完box属性后我们开始在项目中实践：
首先介绍几个坑：
1、可参与box-flex比例分配的元素必须为display:block。
2、内联元素会占用box内空间但是不参与剩余空间分配。
好了，我们开始设计一个简单的html结构表单：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> 6 <meta content="yes" name="apple-mobile-web-app-capable"> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 8 <meta content="telephone=no" name="format-detection"> 9 <meta content="email=no" name="format-detection"> 10 <title>demo</title> 11 </head> 12 <body> 13 <div class="view"> 14 <div class="main"> 15 <form class="formMain" action="" method="post"> 16 <ul> 17 <li> 18 <label for="vender">商家:</label> 19 <input type="text" name="vender"> 20 </li> 21 <li> 22 <label for="name">姓名:</label> 23 <input type="text" name="name"> 24 </li> 25 <li> 26 <label for="number">手机:</label> 27 <input type="text" name="number"> 28 </li> 29 <li> 30 <button class="submit" type="submit">提交</button> 31 </li> 32 </ul> 33 </form> 34 </div> 35 </div> 36 </body> 37 </html>
随后进行css样式设计：
1 html,body{ 2 margin:0 auto; 3 width:100%; 4 height:100%; 5 background-color:rgb(40,48,54); 6 color:white; 7 overflow: hidden; 8 overflow-y: scroll; 9 -webkit-user-select: none; 10 } 11 div{ 12 margin:0 auto; 13 } 14 p{ 15 margin:0; 16 padding:0; 17 } 18 .view{ 19 height:100%; 20 /* Safari, Opera, and Chrome */ 21 display:-webkit-box; 22 -webkit-box-orient:vertical; 23 -webkit-box-pack:center; 24 -webkit-box-align:center; 25 26 /* W3C */ 27 display:box; 28 box-orient:vertical; 29 box-pack:center; 30 box-align:center; 31 } 32 .formMain{ 33 height:100%; 34 } 35 .main{ 36 width:100%; 37 height:70%; 38 } 39 .main ul { 40 width:100%; 41 height:100%; 42 list-style-type:none; 43 list-style-position:outside; 44 margin:0px; 45 padding:0px; 46 } 47 .main li{ 48 height:4rem; 49 margin: .8rem; 50 padding:0; 51 position:relative; 52 /* Safari, Opera, and Chrome */ 53 display:-webkit-box; 54 -webkit-box-orient:horizontal; 55 -webkit-box-pack:center; 56 -webkit-box-align:center; 57 58 /* W3C */ 59 display:box; 60 box-orient:horizontal; 61 box-pack:center; 62 box-align:center; 63 } 64 .main label { 65 margin:0; 66 padding:3px; 67 display:inline-block; 68 font-size:1.8rem; 69 } 70 .main input[type="text"] { 71 margin: 0 5px; 72 padding:0; 73 display: block; 74 -webkit-box-flex: 1.0; 75 box-flex: 1.0; 76 background-color: #1F272D; 77 font-size:1.8rem; 78 height: 3.4rem; 79 border-style: solid; 80 border-width: 0 1px 1px; 81 border-color: rgba(196, 196, 196, 0.18); 82 box-shadow: 0 1px 1px rgba(9, 9, 9, 0.17) inset; 83 border-radius: .3em; 84 box-sizing: border-box; 85 color:#fff; 86 } 87 .main input:focus{ 88 background: #fff; 89 border-color:#28921f; 90 color:#000; 91 } 92 .main button{ 93 margin:0 5px; 94 padding:0; 95 border-style: solid; 96 border-width: 0 1px 1px; 97 border-color: #5cd053; 98 border-radius:.3em; 99 height: 3.4rem; 100 display:block; 101 -webkit-box-flex:1.0; 102 box-flex:1.0; 103 font-size:1.8rem; 104 background-color: rgba(90, 180, 105, 0.88);; 105 color:#fff; 106 } 107 .main button.submit:active { 108 border: 1px solid #20911e; 109 -webkit-box-shadow:0 0 10px 5px #356b0b inset ; 110 box-shadow: 0 0 10px 5px #356b0b inset; 111 }
为了在移动端中表现的极致，我们还需要增加一些响应式的样式以及一些默认样式的处理，加工后的完整代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> 6 <meta content="yes" name="apple-mobile-web-app-capable"> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 8 <meta content="telephone=no" name="format-detection"> 9 <meta content="email=no" name="format-detection"> 10 <title>demo</title> 11 <style> html {font-size:10px} 12 @media screen and (min-480px) and (max-639px) { 13 html { 14 font-size: 15px 15 } 16 } 17 @media screen and (min-640px) and (max-719px) { 18 html { 19 font-size: 20px 20 } 21 } 22 @media screen and (min-720px) and (max-749px) { 23 html { 24 font-size: 22.5px 25 } 26 } 27 @media screen and (min-750px) and (max-799px) { 28 html { 29 font-size: 23.5px 30 } 31 } 32 @media screen and (min-800px) and (max-959px) { 33 html { 34 font-size: 25px 35 } 36 } 37 @media screen and (min-960px) and (max-1079px) { 38 html { 39 font-size: 30px 40 } 41 } 42 @media screen and (min-1080px) { 43 html { 44 font-size: 32px 45 } 46 } 47 *{-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;} 48 *:focus {outline: none;} 49 input{ outline:none;} 50 html,body{ 51 margin:0 auto; 52 width:100%; 53 height:100%; 54 background-color:rgb(40,48,54); 55 color:white; 56 overflow: hidden; 57 overflow-y: scroll; 58 -webkit-user-select: none; 59 } 60 div{ 61 margin:0 auto; 62 } 63 p{ 64 margin:0; 65 padding:0; 66 } 67 .view{ 68 height:100%; 69 /* Safari, Opera, and Chrome */ 70 display:-webkit-box; 71 -webkit-box-orient:vertical; 72 -webkit-box-pack:center; 73 -webkit-box-align:center; 74 75 /* W3C */ 76 display:box; 77 box-orient:vertical; 78 box-pack:center; 79 box-align:center; 80 } 81 .formMain{ 82 height:100%; 83 } 84 .main{ 85 width:100%; 86 height:70%; 87 } 88 .main ul { 89 width:100%; 90 height:100%; 91 list-style-type:none; 92 list-style-position:outside; 93 margin:0px; 94 padding:0px; 95 } 96 .main li{ 97 height:4rem; 98 margin: .8rem; 99 padding:0; 100 position:relative; 101 /* Safari, Opera, and Chrome */ 102 display:-webkit-box; 103 -webkit-box-orient:horizontal; 104 -webkit-box-pack:center; 105 -webkit-box-align:center; 106 107 /* W3C */ 108 display:box; 109 box-orient:horizontal; 110 box-pack:center; 111 box-align:center; 112 } 113 .main label { 114 margin:0; 115 padding:3px; 116 display:inline-block; 117 font-size:1.8rem; 118 } 119 .main input[type="text"] { 120 margin: 0 5px; 121 padding:0; 122 display: block; 123 -webkit-box-flex: 1.0; 124 box-flex: 1.0; 125 background-color: #1F272D; 126 font-size:1.8rem; 127 height: 3.4rem; 128 border-style: solid; 129 border-width: 0 1px 1px; 130 border-color: rgba(196, 196, 196, 0.18); 131 box-shadow: 0 1px 1px rgba(9, 9, 9, 0.17) inset; 132 border-radius: .3em; 133 box-sizing: border-box; 134 color:#fff; 135 } 136 .main input:focus{ 137 background: #fff; 138 border-color:#28921f; 139 color:#000; 140 } 141 .main button{ 142 margin:0 5px; 143 padding:0; 144 border-style: solid; 145 border-width: 0 1px 1px; 146 border-color: #5cd053; 147 border-radius:.3em; 148 height: 3.4rem; 149 display:block; 150 -webkit-box-flex:1.0; 151 box-flex:1.0; 152 font-size:1.8rem; 153 background-color: rgba(90, 180, 105, 0.88);; 154 color:#fff; 155 } 156 .main button.submit:active { 157 border: 1px solid #20911e; 158 -webkit-box-shadow:0 0 10px 5px #356b0b inset ; 159 box-shadow: 0 0 10px 5px #356b0b inset; 160 } 161 </style> 162 </head> 163 <body> 164 <div class="view"> 165 <div class="main"> 166 <form class="formMain" action="" method="post"> 167 <ul> 168 <li> 169 <label for="vender">商家:</label> 170 <input type="text" name="vender"> 171 </li> 172 <li> 173 <label for="name">姓名:</label> 174 <input type="text" name="name"> 175 </li> 176 <li> 177 <label for="number">手机:</label> 178 <input type="text" name="number"> 179 </li> 180 <li> 181 <button class="submit" type="submit">提交</button> 182 </li> 183 </ul> 184 </form> 185 </div> 186 </div> 187 </body> 188 </html>
到此为止，一个可随浏览器宽度自由伸缩的弹性布局的简单表单就设计完成，大家可以在浏览器中查看，右边的输入框是自适应宽度的，既不需要脱离文档流，又可以自适应任何分辨率的手机屏幕。
当我写完这篇文章后，我要特别声明一下，该弹性布局的技术早在几年前就已经很好的实现了，园子中一定存在不少相关文章，所以我并不想作为一个多么牛的技术来发表，只是确实弹性布局很多web前端工程师没有很好的利用，对于该技术，大多数文章的标题是以弹性盒模型来设关键字的，所以针对例如解决左边固定右边自适应宽度的方案查找，很多同学在百度中确实很难查到弹性盒模型解决方案。
最后，祝愿大家都能学习与分享更多宝贵的前端知识，我们一起努力！