弹性盒子模型
注：该大部分内容借鉴于菜鸟教程网站，附原网址
http://www.runoob.com/css3/css3-flexbox.html
一，弹性盒模型概述
它主要用于实现容器里项目的对齐、方向、排序，它能够动态修改子元素的宽度和高度，决定元素在盒子中的分布方式以及如何处理盒子可用空间，对于不同的尺寸的屏幕得以合适的布局。
二，弹性盒子的组成
弹性盒子组成图
1，弹性盒子 = 弹性容器(Flex container) + 弹性子元素(Flex item)
2，弹性盒子里有“主轴(main axis)”与“侧轴(cross axis)”的概念
3，弹性盒子里有“主轴开始|结束(main start|end)”与“侧轴开始|结束(cross start|end)”的概念
4，
主轴：指盒子水平方向的虚拟轴
侧轴：指竖直方向垂直主轴的虚拟轴
5，
主轴开始|结束：指水平方向左右的两端，分别为主轴开始、主轴结束
侧轴开始|结束：指水竖直向上下的两端，分别为侧轴开始、侧轴结束
二，弹性盒子模型属性列表
四，弹性盒子相关属性
1，flex-direction属性
该属性指定弹性子元素在父容器的位置
实现方式：
flex-direction: row | row-reverse | column | column-reverse；
属性列表
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
2，justify-content属性
内容对齐。属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
实现方式：
justify-content: flex-start | flex-end | center | space-between | space-around
属性列表
flex-start：弹性项目向行头紧挨着填充。默认值。
flex-end：弹性项目向行尾紧挨着填充。
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上。
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。
3，align-items属性
设置或检索弹性盒子元素在侧轴方向上的对齐方式
实现方式：
align-items: flex-start | flex-end | center | baseline | stretch
属性列表
flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴上居中放置。。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
4，flex-wrap属性
用于指定弹性盒子的子元素换行方式
实现方式：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
属性列表
nowrap： 默认值， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap： 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
5，align-content属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
实现方式：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
属性列表
stretch: 默认值。各行将会伸展以占用剩余的空间。
flex-start: 各行向弹性盒容器的起始位置堆叠。
flex-end: 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在弹性盒容器中平均分布。
space-around： 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
6，align-self属性
属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式
实现方式：
align-self: auto | flex-start | flex-end | center | baseline | stretch
属性列表
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
7，flex属性
属性用于指定弹性子元素如何分配空间
实现方式：
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
属性列表
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。