css 使用flex彈性佈局

在表單中時常會遇到橫向排列的表單項，每次精確的控制控制寬高真的很煩，使用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;

　　}

}

我在商品列表中也經常使用這種佈局，控制商品單列或多列切換很是方便