一种布局方式，弹性布局，六个属性
flex-direction：
flex-direction:row; 从左向右
flex-direction:column; 从上到下
flex-direction:row-reverse;从右到左
flex-wrap：
flex-wrap: nowrap；不换行
flex-wrap: wrap；顺序换行
flex-wrap: wrap-reverse；倒着换行（算你狠）
justify-content：
justify-content : center;元素居中排列
justify-content : flex-start;元素从左开始排列
justify-content : flex-end;元素从右开始排列
justify-content : space-between;元素间间隔，两端会靠边
justify-content : space-around;类似与元素间左右padding
align-items：
align-items : flex-start;元素纵向，向上最齐
align-items : flex-end;元素纵向，向下最齐
align-items : center;元素纵向，居中最齐
align-items : baseline；元素一条线对齐
align-items: stretch;元素上下填满
align-content：
align-content: flex-start;元素内容纵向，从上到下
align-content: flex-end，元素内容纵向，从下到上
align-content: stretch，垂直方向居中
align-content: center；元素被拉伸以占满容器
align-content: space-between;平均分布，中间留空白
align-content: space-around;类似于上下padding
参考链接1：https://www.jianshu.com/p/d9373a86b748/
参考链接2：https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
