网页布局之Flex 弹性布局

引用 uni-app官网的一句话：遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。

想要更好的学习Flex 弹性布局，建议去看阮一峰老师的Flex 布局教程和flex实践篇，此文章仅供个人记忆、学习，勿喷。
只有敲过和不停的敲，才可能为己所用。

Flex 属性介绍

Flex 属性分为容器属性（父亲）和容器中项目（儿子），使用flex布局可以解决垂直居中的难题。实现页面兼容和解决垂直居中的问题；

容器的六个属性

flex-direction:（direcetion 方位、排列方向） row | row-reverse | column | column-reverse ;
栗子：
flex-wrap: (wrap 换行) nowrap | wrap | wrap-reverse ;
flex-flow: (是direction和wrap 的简写) row || wrap ;
justify-content: (justify 总体水平对齐方式) flex-statr(默认，左对齐) | flex-end(右对齐) | center(居中) | space-between(空隙相等) | space-around(中间间隙是左右两边空隙的一倍) ;
align-itmes: (垂直) flex-statr | flex-end | center(居中) | baseline（对齐第一个文字的水平线） | stretch
align-content: (总体垂直对齐方式) flex-statr | flex-end | center | space-between | space-around

实现一个元素居中例子：

                /* 实现垂直居中 */
		.boxs{
			width: 100%;
			height: 800px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #808080;
		}
		.boxs-item{
			width: 200px;
			height: 200px;
			background-color: #0000FF;
		}