flex 布局已经流行好久了，从最开始大家都在用非官方标准的 box 布局（display: box; display: -webkit-box;），到后来的各种兼容写法，再到后来基本上就是只用 flex 了。
毕竟标准就是标准，虽然有时候会迟到，但是最终肯定还是主角。
现在的web前端项目，特别是管理系统和移动端，都在大量使用 flex 布局了。一些流行的 UI 框架也是，比如 Bulma，还有 Bootstrap（第5版会抛弃jQuery）。。。
不过，近期却发现大伙对 flex 布局这块掌握的相当的弱，其实我掌握的也不好，不过一些特别基础的总还是要熟悉并且能熟练应用到工作中啊。今天咱们不记流水账，只把必须要熟悉的 flex 知识说一说。
1# 浏览器支持
只看 ie 就可以了，得 ie 11
2# flex 布局简介
flex 是 flexible box 的简写，也就是弹性盒子布局。它是 CSS3 的标准，不过它不是出现最早的弹性盒子布局，如果你也用过 box 布局理解起来会很简单。
flex 布局是用来设置其子元素如何分配页面空间的一种方式，记好是子元素。
3# 如果一个元素设置了 display: flex，它的子元素会发生一些变化，先看下子元素的排列
.flex-demo{
display: flex;
}
默认子元素会水平排列，不管是不是块元素，如果想要垂直排列
.flex-demo{
display: flex;
flex-direction: column;// 加上这个，子元素就垂直排列了
}
flex-direction 属性还有一些其它值，可以自己看下，至少要很清楚 row / column
4# 子元素的水平方向对齐
.flex-demo{
display: flex;
justify-content: center;// 水平居中对齐
}
可选的对齐方式很多，flex-start | flex-end | center | space-between | space-around，居中和两端对齐用的比较多。其实也不用去记，知道 justify-content 是用来设置水平对齐的，值在浏览器里调试就好了，时间长了，自己就记住了。
5# 子元素垂直方向对齐
.flex-demo{
display: flex;
align-items: center;// 垂直居中对齐
}
可选方式也不少，flex-start | flex-end | center | baseline | stretch，都试下
有了上面两个属性，设置一个未知宽高的元素垂直水平居中就很容易了
6# 子元素弹性宽高设置，特别注意，这个属性是设置到子元素上的
.flex-item{
flex-grow:1;// 占满父元素剩余的宽度，多个子元素都是 1，会平分父元素宽度
}
上面的 flex-grow:1 也可以简写成 flex: 1，常用的地方，比如下图
按钮的宽度不变，文本框的高度会随着屏幕的宽度自动改变；这样的需求用 flex 来做，大概的代码如下
.flex-demo{
display: flex;
}
.search-btn{
width:80px;
...
}
.search-ipt{
flex-grow:1;// flex: 1
}
当然，flxe 还有很多其它的属性这里都没有说到，自行搜索学习吧，你是一个前端，不能这么爱偷懒！
网友评论