一，为什么写这篇文章
在很早之前就接触display：flex布局，尤其是不考虑低版本浏览器兼容之后，就开始肆无忌惮的使用了。之前做pc端的时候，要求兼容到ie8，也不会注意到它。后来做移动端，第一次看到display：flex，还是从一个实习生的代码里，然后查了查资料，居然是这么方便。
简单的使用及原理请查看。
二.基本使用
父元素
{ display:flex;} - flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
可以有6个属性可以设置，具体不再细说。
子元素
{ flex:none | auto; /* default auto */}/* 1表示该元素撑满剩余空间 */{ flex:1} 我主要想说的是子元素的flex属性，刚接触时确实不好理解。理解了这个就可以实现左固定右自适应的这种布局，通常出现在列表显示的时候。网上还通常见到flex：1 |none|auto 的这种写法，就是下面这几个属性在作祟。
每个子元素也称为 “项目”，属性值有:
1、order //定义各个子元素的排列顺序，数值越小，排列越靠前，默认为0，可为负数
.item{ order:-1;/* 任意数字 */ } 2、flex-grow //定义子元素的放大比例，默认为0（不放大），前提是父容器有空余空间
.item{ flex-grow: ; /* default 0 */ } 3、flex-shrink //如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
.item{ flex-shrink: ; /* default 1 */ } 4、flex-basis //在子元素分配空余空间前，设定指定的子元素的空间大小，默认auto（原值）
.item{ flex-basis: | auto; /* default auto */ } /* 可以设置60% 或者 200px */ 5、flex //是flex-grow、flex-shrink、flex-basis的组合，默认值flex:0 1 auto;
.item{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } /* 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) */ /* 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值 */ 6、align-self //允许单个子元素与其他子元素不一样的对齐方式，可以覆盖父元素设定的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同stretch（填充满）。
.item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; } 我们通常用到的就是这个flex属性，在布局的时候会很有用。
对于这个属性，最好是手动敲一下，尝试一下各种值出现的效果。
三.圣杯布局
layout布局一直是css很重要的知识点，在面试中也会经常遇到，这里就用flex做一个圣杯布局。
css
*{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } body{ display: flex; flex-direction:column; } .header,.footer{ flex: 0 0 80px; background-color: #7dbcea; } .container{ flex: auto; background-color: #145d9c; display: flex; } .container .left,.container .right{ flex: 0 0 200px; background-color: #3a90ce; } .container .main{ flex: auto; background-color: #145d9c; } html