弹性布局flex

父级标签属性设置 

display: flex;/*弹性布局*/
flex-direction: row;/*伸缩流方向*/
/*
 row(默认值) 
 row-reverse(反转) 
 column(垂直方向) 
 column-reverse(垂直方向反转)
*/
flex-wrap: nowrap;/*伸缩容器换行*/
/*
 nowrap(默认值)
 wrap(换行) 
 wrap-reverse(反转)
*/
justify-content: space-around; /*主轴对齐*/
/*
 flex-start(左对齐)
 flex-end(右对齐)
 center(居中对) 
 space-between(两端对齐)
 space-around(平均分配)
*/
align-items: stretch;/*侧轴对齐*/
/*
 flex-start(上对齐) 
 flex-end(下对齐) 
 center(居中对齐) 
 baseline(基线对齐) 
 stretch(默认值 填充)
*/

设为弹性布局元素的子集则可以通过设置flex属性改变所占比例

.one{
    flex: 1;
}
.two{
    flex: 2;
}
	

示例代码

	
		
		
		
	
	
		

			
1
			
2
			
3
			
4
			
5