上一篇文章中有提及過很多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前端工程師沒有很好的利用，對於該技術，大多數文章的標題是以彈性盒模型來設關鍵字的，所以針對例如解決左邊固定右邊自適應寬度的方案查找，很多同學在百度中確實很難查到彈性盒模型解決方案。
最后，祝願大家都能學習與分享更多寶貴的前端知識，我們一起努力！