flex布局语法

做前端的同学应该了解，最开始页面的布局就是table，在table中填各种内容就好了
后来发展成div+css的模型，各种fix，float什么的
由于移动端设备的兴起，flex模型逐渐进入人们的视野

以下代码就可以定义一个class=”box”的div成一个flex容器
1
2
3
.box{
  display: flex;
}

在css世界中，html中有两种元素，一种是块级元素，一种是内联元素。块级元素负责布局，内联元素负责内容。

什么是内容呢？一段文字，一张图片，一个输入框，一个按钮都是内容的范畴，因此他们的标签都是内联元素。

flex作为容器，最重要的6个属性设置：

flex-direction 控制容器里面元素的排列
- row 横着排(default)
- row-reverse 横着倒过来排
- column 竖着排
- column-reverse 竖着倒过来排
flex-wrap 控制一行拍不下了怎么办
- nowrap 不换行(default)
- wrap 回车换行，往下排
- wrap-reverse 回车换行，往上排
flex-flow
- 简写形式
justify-content 定义容器里面元素的对齐排列方式
- flex-start 顶着头（default）
- flex-end 顶着尾
- center 靠中间
- space-between 靠两头
- space-around 每个元素两侧的间隔相等
align-items 元素也是一个方块，其中的大小可能不一致
- flex-start 头顶头
- flex-end 尾顶尾
- center 中间对中间
- baseline 文字中间对齐
- stretch 拉伸填满（default）
align-content 如果flex-wrap换行了，换行的位置则由它来控制
- flex-start 头顶头
- flex-end 尾顶尾
- center 中间对中间
- baseline 文字中间对齐
- stretch 拉伸填满（default）

flex作为内容，也会有一些特定的属性：

flex-grow 如果空间有，则按比例放大，如果为0则不放大

.item{
  flex-grow: 0; // 默认
  flex-grow: 1; // 放大的比例 1:2:1
}