根据自己的实际工作和大佬们的文章总结的。
flex属性不多，但是很灵活，组合使用可以实现很多种布局。
display: flex | inline-flex
flex是块级的，inline-flex是内联的和inline，block功能类似。
flex布局分为两个部分，容器和项目。
display: flex | inline-flex; //这个属性可以将项目也变为容器
容器的属性有：
容器默认存在两个轴，水平主轴和垂直交叉轴
flex-direction: row(默认值) | row-reverse | column | column-reverse; //row表示主轴在水平方向，起点在左边，row-reverse表示主轴在水平方向，起点在右侧，column表示主轴在垂直方向，起点在顶部，column-reverse表示主轴在垂直方向，起点在底部
justify-content: flex-start（默认值） | flex-end | center | space-between（两边没有空隙，即两端对齐，只项目间有） | space-around（项目左右空隙相同，所以项目和项目间的空隙是边空隙的两倍） //定义了在主轴上的对齐方式
align-items: flex-start | flex-end | center | baseline(第一行文字的基线对齐) | stretch（默认值，如果项目未设置高度或设为auto，则项目将占满整个容器的高度）; //定义了在交叉轴上的对齐方式
flex-wrap: nowrap | wrap | wrap-reverse(换行，第一行在下方); //默认情况下项目都排在一条线（轴线）上，这个属性是表示如果一条轴线放不下，如何换行
align-content: flex-start | flex-end | center | space-between | space-round | stretch(默认值，占满整个交叉轴的轴线) //多轴线的对齐方式，交叉轴的对齐方式，这个结合了align-item和justify-content的值，因为是多行的
flex-flow: flex-direction || flex-wrap; //这两个属性的简写形式，默认值是row nowrap
项目的属性有：
order: 0 ..n; //项目的排序，数值越小越靠前，默认值是0，可以是负数。
flex-grow: 默认是0，即如果存在放大空间也不放大； //定义项目的放大比例，如果所有项目的值都是1，则等分剩余空间，如果一个项目为2，则这个项目是其他项目的2倍。主轴上的
flex-shrink: 默认为1，即如果空间不足则该项目缩小，为0的话表示不会缩小; 如果给项目设置了宽度，并且flex-shrink为0，则该项目在浏览器缩小时不会变小，如果没有设置宽度则在为默认宽度。主轴上的
flex-basis: <length> | auto; //定义了在分配多余空间之前，项目占据的主轴空间（那如果是column的，就是高度了），浏览器根据这个属性计算主轴是否有剩余空间。默认是auto，即项目的本来大小。主轴上的
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; //是这三个属性的简写。默认值是0 1 auto，后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self: auto(表示继承父元素的align-items属性，如果没有父元素，则表示是stretch) | flex-start | flex-end | center | baseline | stretch;
和父元素的align-items属性的值相同，就是多一个auto。同样表示交叉轴的对齐方式。
flex布局的缺点，目前没有属性可以设置项目的间隔大小，所以需要设置padding，并嵌套多个div，内部的div宽度设为100%。
flex可以设置媒体查询
/* Small to medium screens */
@media (min- 24em) {
.small-Grid--fit > .Grid-cell {
flex: 1;
}
.small-Grid--full > .Grid-cell {
flex: 0 0 100%;
}
.small-Grid--1of2 > .Grid-cell {
flex: 0 0 50%
}
.small-Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%
}
.small-Grid--1of4 > .Grid-cell {
flex: 0 0 25%
}
}
flex实现圣杯布局
上、中（左、中、右，并且根据屏幕的大小如果小的话也是上、中、下布局）、下
- 边栏应流动居中，定宽。
- 中间一栏 (主要内容) 在 HTML 源码中应该首先元素出现。
- 所有栏同高，忽略实际高度。
- 使用的 HTML 标记尽量少。
- 当页面内容不够充满页面时，页脚应“粘”在底部。
需要注意的是
1. css中body和html都要设置height:100%;，如果用body{height:100vh}的话不需要设置html的height，但是ie低版本的浏览器不支持。
2. 中间的flex的值为1 0 auto，即flex-basis的值是auto，主轴的高度自动延伸，这里的主轴是上下方向的，因为flex-direction是column
3. 上下的flex设置为none即可，因为高度是固定的
4. 考虑浏览器自适应，中间的flex-direction会根据media的不同而改变
@media （min- 768px）{
.holygrail-body{
flex-direction: column;
}
}
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex test</title>
<style>
html{
/*height: 100%;*/
}
body{
padding: 0;
margin: 0;
}
*{
/*box-sizing: border-box;*/
}
.holygrail{
display: flex;
height: 100vh; /*不用100vh是有些浏览器不兼容*/
flex-direction: column;
}
.holygrail-header,.holygrail-footer{
flex: none;
}
.holygrail-body{
flex: 1 0 auto;
display: flex;
flex-direction: column;
padding: 10px;
}
.holygrail-nav,.holygrail-ads{
flex: 0 0 12em;
background: hsla(31,15%,50%,.1);
border-radius: 4px;
text-align: center;
}
.holygrail-nav{
order: -1;
}
.holygrail-content{
flex: 1;
padding: 10px;
}
.header{
height: 40px;
background: #ccc;
}
.footer{
height: 50px;
background: #000;
}
@media (min- 768px){
.holygrail-body{
flex-direction: row;
}
}
</style>
</head>
<body class="holygrail">
<header class="holygrail-header">
<div class="header">fadsfa</div>
</header>
<main class="holygrail-body">
<artical class="holygrail-content">
中间内容
</artical>
<nav class="holygrail-nav">左侧内容</nav>
<aside class="holygrail-ads">右侧内容</aside>
</main>
<footer class="holygrail-footer">
<div class="footer"></div>
</footer>
</body>
</html>
flex的小布局，给文本框加上前置组件和后置组件
flex布局图片和文字的排版
flex实现粘性页脚，也就是上面的圣杯布局的变体
flex实现垂直剧中，这个需要看主轴是哪个才能确定是align-items还是 justify-content实现垂直居中。
参考文章：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
https://hufan-akari.github.io/solved-by-flexbox/