[分享]css3手册弹性布局

当今的网页设计不再仅仅局限于电脑屏幕的尺寸，而是需要适配各种不同尺寸的设备，比如手机、平板等移动端设备。而CSS3就提供了弹性布局技术，使得网页的自适应更加便利。弹性布局主要涉及到3个属性——flex...

当今的网页设计不再仅仅局限于电脑屏幕的尺寸，而是需要适配各种不同尺寸的设备，比如手机、平板等移动端设备。而CSS3就提供了弹性布局技术，使得网页的自适应更加便利。

弹性布局主要涉及到3个属性——flex-direction、flex-grow和flex-shrink。

.container{
  display: flex;
  flex-direction: row;
}
.item{
  flex: 1;
} 

flex-direction指定主轴的方向，一般来说，row指水平排列，column指垂直排列；flex-grow和flex-shrink则是控制项目的放大或缩小。

特别是在移动端，不同的尺寸、屏幕比例和像素密度都需要考虑，而弹性布局可以很好的适应各种情况。

@media screen and (max-width: 600px){
  .container{
    flex-direction: column;
  }
} 

使用媒体查询，在不同的屏幕尺寸下，可以通过改变flex-direction来适配。

总之，弹性布局是CSS3中的重要特性，使得网页布局自适应性更强，且可以适配各种设备尺寸，包括移动端。