摘抄与理解--css display:flex

一种布局方式，弹性布局，六个属性

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