参考原文：
关于 Flexbox
Flexbox 是流行的一种 CSS 布局。使用只需要简单的加上 display: flex 的 CSS 属性即可。
flex-grow
Flexbox 布局中，子元素想要占据当前行的剩余所有宽度，只需要指定其 flex-grow: 1 即可。 flex-grow 属性默认值为 0， 即使用本来宽度
Align-items
Flexbox 布局默认不改变元素的宽度，但改变了元素的高度。如果没有指定具体的高度，将使用容器全部高度。想要改变这种情况，可以使用 align-self 。不过子元素使用 align-self 时，如果想要改写的子元素太多，一个一个写显得过于繁杂。可以在父元素中使用 align-items。
align-items 和 align-self 可以使用的值相同, align-items 的值默认被所有子元素的 align-self 继承。
- flex-start: 顶部对齐，高度不拉伸
- center: 居中，高度不拉伸
- flex-end: 底部对齐，高度不拉伸
- stretch: 默认值，高度自动拉伸
参考练习
See the Pen flexbox-form by Ulyso (@ulyso) on CodePen.