[分享]css3弹性盒子浏览器支持

CSS3弹性盒子是一种新的布局方式，它的优势在于可以轻松实现水平或垂直居中、不同大小的元素等等一系列复杂的布局效果，而且代码简单、易于维护。然而，这种新的CSS属性并没有得到所有现代浏览器的支持。我们...

CSS3弹性盒子是一种新的布局方式，它的优势在于可以轻松实现水平或垂直居中、不同大小的元素等等一系列复杂的布局效果，而且代码简单、易于维护。然而，这种新的CSS属性并没有得到所有现代浏览器的支持。

我们来了解一下CSS3弹性盒子在各大浏览器中的支持情况。

/* Firefox */
.box{
  display: -moz-box; /*虽然-moz-box已废弃，但是仍然可以使用*/
  display: -webkit-box;
  display: box;
}

/* Chrome、Safari、Opera */
.box{
  display: -webkit-box;
  display: box;
}

/* IE10 */
.box{
  display: -ms-flexbox;
}

/* IE11+ */
.box{
  display: flex;
} 

在各大浏览器中，CSS3弹性盒子的支持程度不尽相同。Firefox浏览器在弹性盒子的实现上较为早，因此其支持较为全面；而其他浏览器在最近几年的版本中逐渐加入了对弹性盒子的支持。需要注意的是，IE10以及以下版本并不支持该属性，因此在设计的时候需要加入优雅降级的方案。