网页布局之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;
		}

容器项目中的六个属性

• order: number ; 在项目中定义，数值越小越靠前
• flex-grow: 按比例放大项目
• flex-shrink: 按比例缩小项目
• flex-basis: 还在了解
• flex：grow,shrink 和 basis 的简写
• align-self: 使自己的对齐方式与其他的与众不同， 继承了align-items的属性

首先要理解上面单词的作用，理解是为了方便记忆。