--外功篇-《CSS的天空》-Flex布局的属性--
Flex的基本属性
display:flex
任何容器都可以指定为Flex布局的容器（即需要排列的父标签）
行内元素需要使用inline-flex
Webkit内核的浏览器需要加上-webkit-前缀
使用display:flex;之后，float、clear和vertical-align属性将会失效
因为flex会定义元素的对齐方式，所以会导致文本对齐方式的失效
flex中的基本概念
flex容器分为以下的基本设定属性：
main axis主轴（默认为x轴方向，即横向）
main start主轴开始的位置
main end主轴结束的位置
cross axis交叉轴（垂直于main axis的方向）
cross start交叉轴开始的位置
cross end交叉轴结束的位置
项目默认沿主轴排列，单个项目占据主轴空间叫做main size，占据的交叉轴的空间叫做cross size。（即主轴上的长度，交叉轴上的宽度）
flex容器属性
flex-direction flex 容器flex主轴方向
flex-direction决定主轴的方向。
.box{
flex-direction:row|row-reverse|column|column-reverse
}
/*分别设置主轴为：x轴正轴|x轴负轴|y轴正轴|y轴负轴*/
flex-wrap flex中元素换行
flex-wrap定义容器内部元素，如何进行换行
.box{
flex-wrap:nowrap|wrap|wrap-reverse
}
/*属性值分别对应：不换行|换行，向下排列|换行向上排列*/
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box{
flex-flow:<flex-direction>||<flex-wrap>
}
justify-content
justify-content属性定义了子元素在主轴上的对齐方式
.box{
justify-content:flex-start|flex-end|center|space-between|space-around;
}
/*属性值分别对应：左对齐|右对齐|居中|两端对齐，中间子元素间隔相等|每个项目两侧间隔相等，项目间隔比项目边框间隔大一倍*/
align-items
align-item属性定义子元素在交叉轴上的对齐方式（类似于文本内容设置行高）
.box{
align-items:flex-start|flex-end|center|baseline|stretch
}
/* 属性值对应：交叉轴的起点对齐 | 交叉轴的终点对齐 | 交叉轴的中点对齐 | 项目第一行文字的基线对齐 | 如果子元素未设置高度或者auto，占满整个容器的高度 */
align-content
align-content定义多根轴线对齐的方式。（即主轴、交叉轴相互作用对齐）
.box{
aligh-content:flex-start|flex-end|center|space-between|space-around|stretch;
}
/*
分别对应：
与交叉轴起点对齐
与交叉轴终点对齐
与交叉轴中点对齐
与交叉轴两端对齐，轴线间的元素间隔平均
每根轴线两侧的间隔都相等。所以，轴线间的间隔比轴线与边框的间隔大一倍。
（默认值）轴线占满交叉轴
*/
容器内部元素的属性
order属性
order属性定义项目的排列顺序。数值越小越靠前，默认值为零。（还没想到怎么用...通过dom修改数值进行拖拽排序？）
.item{
order:<integer>;
}
flex-grow属性
flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大
.item{
flex-grow:<number>;
}
/*数值越大，同等情况下相比于其他项目所占据的空间越大*/
flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认值为1，如果空间不足，该元素将缩小。
.item{
flex-shrink:<number>;
}
/*数值越大，同等情况下相比于其他项目所缩小size越多。负值对该属性无效*/
flex-basis属性
flex-basis属性定义了项目在容器中，所能占据的主轴空间。浏览器一句该属性，计算主轴是否有多余空间。默认值为auto，即项目本来的大小。
.item{
flex-basis:<length>|auto;
}
/*可以设置例如：300px，将空间固定*/
flex属性
容器项目中的flex是以上的属性简写。
.item{
flex:none||<flex-grow><flex-shrink><flex-basis>
}
/*默认值 0 1 auto。后两个值可选*/
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认值为auto继承容器的align-items属性，如果没有父元素，则等同于stretch（是否可以利用？）
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
