建议打开浏览器开发者工具(F12)查看demo的代码!
- flex-h横向排列，flex-v垂直排列，子元素加flex-fill可撑开；
- 子元素排列方向使用视觉的上(top)下(bottom)左(left)右(right)作为class名；
- 横向多行布局可在父节点添加wrap类名，子节点需换行的位置使用hr标签换行，兼容性请查阅caniuse；
- 如果有其它布局要求，请使用flex布局的标准属性来设置。
使用class名：flex-h、flex-v、top、right、bottom、left、center，互相组合可以开发绝大多数的布局。
基础教程
父元素（class名）
横向排列 > flex-h
垂直排列 > flex-v
子元素在行或列内居中 > center
子元素在行或列内向上靠 > top
子元素在行或列内向右靠 > right
子元素在行或列内向下靠 > bottom
子元素在行或列内向左靠 > left
*注：主方向上同时设置了相反的方向则散开排列
子元素（class名）
在排列的方向上撑开 > flex-fill
*注：兄弟元素flex-fill之间1:1撑开
进阶教程
父元素（class名）
父元素表现为行内元素 > inline
子元素一行排满则换行 > wrap
子元素在交叉轴上拉伸 > stretch
多行（列）的情况下，行（列）之间在交叉轴散开 > between
子元素（未声明的情况下为class名）
在wrap下强制换行 > hr(标签)
指定子元素单独设置交叉轴布局方向 > self-[top/right/bottom/left]
Demo
横向
横向，垂直方向默认居中 flex-h
横向，靠右 flex-h right
居中 flex-h center
横向，靠上(top)或下(bottom) flex-h top
横向，左右散开(相反方向同时设置即可散开排列) flex-h left right
横向，特定子元素撑开，兄弟元素间保持1:1的宽度，子元素添加 flex-fill
1
2 > flex-fill
3 > flex-fill
4
横向，某个元素垂直布局方向不同，子元素添加self-[top/center/bottom] flex-h top
1
2 > self-bottom
flex-fill
3 > self-center
flex-fill
4
横向，行内元素 flex-h inline
垂直
垂直，水平方向默认居中 flex-v
垂直，靠下 flex-v bottom
居中 flex-v center
垂直，上下散开(相反方向同时设置即可散开排列) flex-v top bottom
垂直，特定子元素撑开，兄弟元素间保持1:1的高度 flex-fill
1
2
flex-fill
3
flex-fill
4
垂直，所有子元素拉伸 flex-v stretch
横向多行（进阶）
横向多行，默认垂直居中，可快速开发多行布局的样式，使用hr标签换行 flex-h wrap
横向多行，设置相反方向让每行左右散开 flex-h wrap left right
横向多行，设置top或bottom可以设置单行内的子元素布局方向 flex-h wrap top
横向多行，设置between让每行之间散开 flex-h wrap between
垂直多列（进阶）
垂直多列，默认垂直居中，可快速开发多行布局的样式，使用hr标签换行 flex-h wrap
垂直多列，设置相反方向让每列上下散开 flex-h wrap top bottom
垂直多列，设置left或right可以设置单列内的子元素布局方向 flex-h wrap left
垂直多列，设置between让每列之间散开 flex-h wrap between