- 一、什么是flex box？
flex box 是c3的一种新的布局模式。
传统的布局方案是基于盒状模型，依赖display属性+定位属性（position）+浮动属性（float）。缺点是对于特殊布局过程繁琐，例如——垂直居中就不容易实现。
flex布局就可以简便、完整、响应式地实现各种页面布局。目前，几乎所有浏览器都支持
（MDN-Flex浏览器支持查询)
- 二、关于flex的两个基本概念
- 容器：需要添加弹性布局的父元素，设置了弹性盒子（display：flex；）的这个盒子叫弹性容器（Flex container）
- 元素：flex布局中的每一个子代（直系子元素才是），称为弹性子元素(Flex item)。
- 三、关于flex的两个方向
- 主轴：在flex布局中，系统默认规定水平方向为主轴；垂直方向为侧轴。
设为Flex布局后，子元素的float、clear、以及vertical-align属性将失效
- flex布局核心代码
#container{
//加入flex布局模式
display:flex;
//沿主轴居中排列,
//
justify-cntent:center;
//侧轴居中对齐
//
align-items:center;
}
- 三、容器属性
- flex-direction
// 四个可选项（ row（默认值）：主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右端。
column:主轴为垂直方向，起点在顶端。
column-reverse:主轴为垂直方向，起点在底部。）- flex-wrap(是否换行)
> 默认情况下元素是按主轴排成一条线，如果排不下就用这个属性定义如何换行
.box{ flex-wrap: nowrap(默认：不换行) | wrap(换行) | wrap-reverse（换行，第一行在下方）; }- justify-content flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly: 两个项目之间的距离相等（每个项目左右边的空隙相等）- align-items
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。 （文字的基线：是指文字的最底部的文字）
- 四、元素属性 align-sele
定义元素在侧轴的排列方式。这个属性是属于单个元素属性
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
