flex表单布局
我们知道，在表单布局的时候，有的时候想对齐的话，我们需要调整元素的外边距margin，内边距padding
但是一旦浏览器的视口发生变化或者设备发生变化，往往会产生我们意想不到的效果。要么是错位，要么是不能适应新设备。今天我们就看看用flex怎么来布局表单。
我们先看第一个例子，传统的布局
<!doctype html>
<head>
<title>Example</title>
</head>
<body>
<form>
<ul class="wrapper">
<li class="form-row">
<label for="name">Name</label>
<input type="text" id="name">
</li>
<li class="form-row">
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn">
</li>
<li class="form-row">
<label for="email">Email Address</label>
<input type="email" id="email">
</li>
<li class="form-row">
<button type="submit">Submit</button>
</li>
</ul>
</form>
<body>
</html>css代码
.wrapper {
background-color: whitesmoke;
list-style-type: none;
padding: 0;
border-radius: 3px;
}
.form-row {
padding: .5em;
}
.form-row > label {
padding: .5em 1em .5em 0;
}
.form-row > input,
.form-row > button {
padding: .5em;
}
.form-row > button {
background: gray;
color: white;
border: 0;
}传统布局的代码是这样的效果
如果大家对这个布局比较满意的话，就不用看下面的代码了，如果不满意的话，可以继续读下去
我们换另一套css的样式：
.wrapper {
background-color: whitesmoke;
list-style-type: none;
padding: 0;
border-radius: 3px;
}
.form-row {
display: flex;
justify-content: flex-end;
padding: .5em;
}
.form-row > label {
padding: .5em 1em .5em 0;
}
.form-row > input {
flex: 1;
}
.form-row > input,
.form-row > button {
padding: .5em;
}
.form-row > button {
background: gray;
color: white;
border: 0;
}用了这套样式后，效果是这样的
解释一下，我们对form的每一行采用了flex布局，也就是.form-row { display:flex},然后对每行内的子元素lable和input采用了label自适应，然后input占据剩余的所有空间。这看着比第一个好点，但是还是美哦与对齐呀。因此，我应该想办法想input对齐。这里我采用的一种方案是，input占据整个宽度的⅔，剩下的占据⅓.
好了，我贴出关键的代码：
.form-row > label {
padding: .5em 1em .5em 0;
flex: 1;
}
.form-row > input {
flex: 2;
}
现在看着舒服点了吧。
大家注意了，其实这个比例也是可以根据不同的屏幕宽度进行改变的，因此屏幕比较大的时候，可能1:2的比例就不那么适应了，因此可以结合媒体查询来设置，代码如下：
@media screen and (min-width: 768px) {
.form-row > input {
flex: 3;
}
}
@media screen and (min-width: 992px) {
.form-row > input {
flex: 4;
}
}
@media screen and (min-width: 1200px) {
.form-row > input {
flex: 5;
}
}再有就是可能想让label的文字也对齐，其实这个只要设置一个text-align属性就可以啦。
