关于盒模型属性的学习

**

最近学习了CSS3中关于盒模型的布局属性，以下是其中部分内容

。**

关于盒模型
首先盒模型分为两种：普通盒模型，怪异盒模型。
其本质区别在于其对于宽高计算方式的不同。
普通盒模型：元素width和height属性只包含元素的content(内容)。 
怪异盒模型：元素width和height属性是包含元素的border(边框)+padding(内边距)+content(内容)的。

在小程序开发中，需要考虑各种尺寸终端设备上的适配。
在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现
在不固定高度信息的例子中，只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。

在介绍各个属性之前，需要先明确一个坐标轴
水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

容器与项目元素
日常开发中，采用flex布局的元素，一般简称为“容器”
容器内的元素简称为“项目”或者“元素”
布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

概念：
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。
flex不单是一个属性，还包含了一套新的属性集
属性集包括设置容器和项目两部分

容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse
③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse
容器属性
④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly
项目元素属性
①多余空间时元素放大比例flex-grow：0（默认值） |
②空间不足时元素缩小比例flex-shrink:1（默认值） |
③元素在主轴上占据空间flex-basis:auto（默认值） |
④flex 是grow、shrink 、basis的简写
⑤元素的排列顺序order:0（默认值） |
⑥单独对某个元素设置交叉轴对齐方式align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch