[分享]css3弹性盒布局和盒模型区别

CSS3弹性盒布局和传统盒模型布局最重要的区别之一是弹性盒模型布局可以完成更加灵活的布局效果，包括对于元素的对齐方式、大小和位置进行更加精细的设定。而传统盒子模型布局则更加的基础，对于页面元素的布局效...

CSS3弹性盒布局和传统盒模型布局最重要的区别之一是弹性盒模型布局可以完成更加灵活的布局效果，包括对于元素的对齐方式、大小和位置进行更加精细的设定。而传统盒子模型布局则更加的基础，对于页面元素的布局效果受限于页面浏览器或设备对于浏览器的尺寸、画面比例、以及元素大小的限制，使用起来也更加的麻烦和复杂。

.box {
  display: flex; 
  flex-direction: column; /* 将元素排列方向设置为垂直排列 */
  justify-content: center; /* 设置元素在垂直方向居中 */
  align-items: center; /* 设置元素在水平方向居中 */
}

.box-item {
  flex: 1; /* 将每一个元素设置为平均分配父元素的空间 */
} 

以上代码就是一个非常简单的弹性盒模型布局，整个盒模型布局中用到了三个重要属性：display、flex-direction、和flex。其中，display属性用来定义对于元素的排列方式，这个属性设置了元素后，后面的属性flex-direction、justify-content、align-items、flex-wrap就进行了精细的设定，对于页面元素可以更加灵活动态的设定。而在传统的盒模型布局中，元素的位置和大小等都是直接在文档中设定的，对于页面元素的排列方式也是受限于其大小和画面比例等的影响。