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;

　　}

}

我在商品列表中也常用这种布局，控制商品单列或多列切换非常方便

 

转载于:https://www.cnblogs.com/wangyuanyuan-blog/p/9435311.html