上一篇文章中有提及过很多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-width:480px) and (max-width:639px) { 13 html { 14 font-size: 15px 15 } 16 } 17 @media screen and (min-width:640px) and (max-width:719px) { 18 html { 19 font-size: 20px 20 } 21 } 22 @media screen and (min-width:720px) and (max-width:749px) { 23 html { 24 font-size: 22.5px 25 } 26 } 27 @media screen and (min-width:750px) and (max-width:799px) { 28 html { 29 font-size: 23.5px 30 } 31 } 32 @media screen and (min-width:800px) and (max-width:959px) { 33 html { 34 font-size: 25px 35 } 36 } 37 @media screen and (min-width:960px) and (max-width:1079px) { 38 html { 39 font-size: 30px 40 } 41 } 42 @media screen and (min-width: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前端工程师没有很好的利用，对于该技术，大多数文章的标题是以弹性盒模型来设关键字的，所以针对例如解决左边固定右边自适应宽度的方案查找，很多同学在百度中确实很难查到弹性盒模型解决方案。
最后，祝愿大家都能学习与分享更多宝贵的前端知识，我们一起努力！