Flex布局篇2

flex布局，又叫弹性布局，是HTML5（css3）中新出的布局方式，主要用于替代传统的float布局。

flex-direction：设置布局方向。

　　默认从左到右row。

　　row-reverse从右到左。

　　column从上到下。

　　column-reverse从下到上。

justify-content：设置子元素在布局方向上的对齐方式。

　　flex-start：对齐开始位置。

　　flex-end：对齐结束位置。

　　center：居中。

　　space-around：间距平分。

　　space-between：两侧贴边，间距平均。

align-items：设置布局的子元素在垂直于布局方向上的对齐方式。

　　flex-start

　　center

　　flex-end

flex-basis：设置本元素在父元素布局方向上的长度。

单独给第一个div加这个属性之后：

.sp{         
    flex-basis: 50px;
}

其他两个是width的宽度，而第一个宽度变为我们所设置的flex-basis值：

#d1{
      flex-grow: 0;
      flex-shrink:1;            
}
#d2{
      flex-grow: 1;
      flex-shrink:0;            
}
#d3{
       flex-grow: 0;
       flex-shrink: 1;
}