在表单中时常会遇到横向排列的表单项，每次精确的控制控制宽高真的很烦，使用flex布局，只需要控制好整个表单的宽度就行了，当然这种布局应用的地方很多，不止这里。

<!-- html -->
<div class="form">
　　<ul>
　　　　<li><select name="city"><option value="上海市">上海市</option><option value="北京市">北京市</option></select></li>
　　　　<li><input id="phone" type="text" maxLength="11" placeholder="请输入您的手机号码" /></li>
　　　　<li><input id="code" type="text" maxLength="6" placeholder="图形验证码" /></li>
　　　　<li><img id="imgCode" class="btnCode" src="<%=codeUrl%>" alt="" /></li>
　　　　<li><input id="phoneCode" type="text" maxLength="6" placeholder="输入验证码" /></li>
　　　　<li><button class="btnPhoneCode">获取验证码</button></li>
　　</ul>
</div>
<!-- css -->
ul{
　　display: flex;
　　flex-flow: row wrap;
　　justify-content: space-between;
　　li{
　　　　flex: 0 0 auto;
　　}
}
我在商品列表中也常用这种布局，控制商品单列或多列切换非常方便