弹性布局和网格布局

弹性布局和网格布局

1、Flex 弹性布局

1-1、Flex容器属性（常用）

flex-direction
justify-content
align-items
align-content
flex-wrap
flex-shrink
我们用上面的容器属性可以来实现一些常见的效果

1-1、水平排列；垂直排列

使用 flex-direction 控制排列方向

flex-direction: column; //垂直
flex-direction: row; //水平

  <!-- HTML -->  
  <div class="box">   
  	<div class="left">我是左边盒子</div>   
  	<div class="right">我是右边盒子</div>  
  </div>  
  <!-- CSS -->    
  body {
         
  	margin: 0;      
  	padding: 0;    
  }    
  .box {
         
  	width: 100%;      
  	display: flex;    
  	flex-direction: column; //垂直排列    
  	//flex-direction: row; //水平排列      
  	padding: 30px;      
  	box-sizing: border-box;    
  }    
  .right,    
  .left {
         
  	height: 60px