简言
弹性布局（Flexbox）是 CSS3 提供的一种一维布局模型，可以轻松实现灵活、响应式的页面布局。下面我们就来聊聊Flex感受一下其独特的魅力吧！
基本概念
采用Flex布局的元素，称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。
容器默认存在两根轴：水平方向的主轴和垂直方向的交叉轴，一般是从左到右从上到下。
Flex项目默认沿主轴排列。
Flex属性分两部分，一部分是弹性容器本身的属性，另一部分是项目属性。
Flex容器属性
定义容器：
.box{
display:flex
容器特性
- 上下文创建：成为所有直接子元素的布局上下文
- 子元素转换：所有直接子元素自动变为弹性项目（flex items）
flex-direction
flex-direction属性决定主轴方向（即项目的排列方向）。
.box{
flex-direction: row | row-reverse | colume | column-reverse
- flex-direction: row 表示主轴方向从左到右（默认主轴就是 row）。
- flex-direction: row-reverse 主轴方向反转，交叉轴保持不变。
- flex-direction: colume 主轴方向和交叉轴方向交换。
- flex-direction: column-reverse 主轴方向从下到上，交叉轴还是从左到右。
常见语法
- justify-content: center； 控制所有子元素在主轴上居中。
- justify-content: space-between; 子元素两端对齐，子元素之间间隔相等。
- align-items: center; 控制所有子元素在交叉轴上居中。
- flex-warp: warp; 运行子容器在主轴上换行。
- flex-flow: row warp； 是flex-direction和flex-warp的简写。
- align-content: center控制所有子元素在交叉轴上居中(只有一根轴线时不起作用)。
Flex项目
常见概念
- 子元素默认不放大，但是可以设置flex-grow:1;允许子元素放大。
- flex-shrink:0;子容器默认可以缩小，但可以设置flex-shrink:0;来设置子元素不缩小。
- order:x(数字)；子容器可以设置order属性来改变他们的排列顺序，值越小越靠前。
- flex-basic:100px;设置子容器的初始尺寸。
- flex: 0 0 100px是上述456属性的简写。
