注意：主轴不一定是水平方向
容器的属性（flex contanier）
1. flex-driection：表示水平轴的方向
flex-direction: row | row-reverse | column | column-reverse;
属性值：
row：水平方向，起点在左（默认值）row-reverse：水平方向，起点在右
column：垂直方向，起点在上
column-reverse：垂直方向，起点在下
2. flex-wrap：项目（flex item）所在的一条线成为轴线，flex-wrap设置项目如何换行
flex-wrap: nowrap | wrap | wrap-reverse;
属性值：
nowrap：不换行（默认值）wrap：换行 ， 从上至下排列
wrap-reverse：换行，从下至上排列
注：flex-direction 与 flex-wrap 可以合并成 flex-flow 属性
flex-flow: <flex-direction> || <flex-wrap>;
3. justify-content：定义了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
属性值：
flex-start：左对齐（默认值）flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：项目间距相等，边缘项目与边缘距离是项目与项目距离的一半
图示：
4.align-items：定义了项目在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
属性值：
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）flex-start：交叉轴起点对齐 (即图1：cross star)
flex-end：交叉轴终点对齐 (即图1：cross end)
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
图示：
5. align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，即常与flex-wrap联合使用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
属性值：
stretch：轴线占满交叉轴（默认值）flex-start：与交叉轴的起点对齐 (即图1：cross star)
flex-end：与交叉轴的终点对齐(即图1：cross end)
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：项目间距相等，边缘项目与边缘距离是项目与项目距离的一半（垂直方向）
图示：
总结：
flew-direction决定主轴方向flew-wrap决定交叉轴换行
flew-flow是上面两者合并
justify-content 主轴对齐方式
align-items 交叉轴对齐方式
align-content 多个交叉轴对齐方式
项目的属性（flex item）
1. order：项目的排列顺序，越小越靠前，默认值0
order: <integer>;
2. flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-grow: <number>; /* default 0 */
注：如果项目（item）的flex-grow都为1 ，它们将等分剩余区域
3. flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-shrink: <number>; /* default 1 */
注：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
4.flex-basis：在分配多余空间之前，项目占据的主轴空间（即图1：main size）
flex-basis: <length> | auto; /* default auto */
注：它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
*注：flex属性为flex-grow, flex-shrink 和 flex-basis的合并 ， 默认值为 0 1 auto ， 既保持项目 原本大小情况下 ， 不进行放大 ， 如果空间不足 ， 则等比例缩小
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
5. align-self ： 项目自己的交叉线对齐方式 ， 覆盖容器（flex contanier）的align-item属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;
注：属性值与align-item相同 ， 多了一个auto默认值 ， 即继承 align-item 对齐方式
总结
order 决定项目先后顺序flex-grow 决定项目的放大比例flex-shrink 决定项目缩小比例
flex-basis 决定项目初始所占大小
flex 为flex-grow 、 flex-shrink 、 flex-basis 合并项
align-self 决定项目交叉轴对齐方式
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
兼容写法
display: -webkit-flex;
display：-webkit-box;
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效题目一 ：让一个容器水平垂直居中
.wrap {
background: black;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.center {
background: red;
width: 100px;
height: 100px;
}
<div class="wrap">
<div class="center"></div>
</div>
题目二：假设高度已知,请写出三栏布局,左右各为300px,中间自适应
.wrap{
display: flex;
height: 1000px;
}
.left{
width: 300px;
background: red;
}
.center{
flex:1;
background: yellow;
}
.right{
width: 300px;
background: blue;
}
<div class="wrap">
<div class="left">1</div>
<div class="center">
这是三栏布局的flexbox布局解决方案；
这是三栏布局的flexbox布局解决方案；
这是三栏布局的flexbox布局解决方案；
这是三栏布局的flexbox布局解决方案；
</div>
<div class="right">3</div>
</div>
