Flex布局
1.父级元素定义:display: -webkit-flex;
2.flex-direction; /*default*/:默认为row,既父元素内每个元素横向排列,高度填充完父元素高度;当设为column时既垂直排列;row-reverse和column-reverse则排列顺序相反;
3.webkit-flex-wrap: 默认为nowrap,既当父元素内的子元素宽度合超过父元素时,将按比例分配父元素宽度;设为wrap时则超过宽度换行;
4.[ flex-flow ]: flex-direction flex-wrap; 集合两个属性;
5.justify-content: flex-start; /* default */设置子元素的内容对齐方式,有flex-strat(向左对齐),flex-end(向右对齐),center(居中对齐),space-between(两端对齐),space-around
6.align-items:auto/*default*/设置子元素的竖直方向上的对齐方式(相对2为默认属性row),有flex-start(顶端对齐,高度为元素自身内容高度,但是所有元素平均分配父元素高度),flex-end(底端对齐,高度为自身内容高度),auto(当父级设置有高度时,竖直方向的子元素高度和填充父级宽度),baseline(相对文字基准线),stretch(可伸缩的);
1.2.3.4.5.6为父元素属性,上述讨论中,当讨论一个属性时,其它属性为默认属性;
6.align-self: auto;