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；/*default*/设置元素（自身为子元素）的竖直方向上的对齐方式(相对2为默认属性row)，有flex-start（顶端对齐，高度为自身内容高度），flex-end（底端对齐，高度为自身内容高度），auto（当父级设置有高度时，填充父级宽度），baseline，stretch;

 

对比：其中，flex-wrap设置为wrap;