[分享]css3弹性布局兼容性

CSS3弹性布局（Flexbox）是一种新的布局方式，允许我们将容器内部的元素布局排列方式变得更加灵活。但是，由于CSS3弹性布局是近年来才出现的CSS规范，有些浏览器并不支持它。 我们可以通过以下方...

CSS3弹性布局（Flexbox）是一种新的布局方式，允许我们将容器内部的元素布局排列方式变得更加灵活。但是，由于CSS3弹性布局是近年来才出现的CSS规范，有些浏览器并不支持它。

我们可以通过以下方式增加网页对弹性布局的兼容性:

1. 设置Flexbox属性的浏览器前缀。在代码中我们可以使用以下代码段：

.container {
  display: -webkit-box;  /* Safari 3-6, iOS 6-8 */
  display: -moz-box;  /* Firefox 2-28 */
  display: -ms-flexbox;  /* IE 10 */
  display: -webkit-flex;  /* Safari 6.1+ */
  display: flex; /* Chrome 29+, Opera 12.1+, Firefox 22+ */
} 

2. 提供回退方案。即使用其他的布局方式(如float和position)实现相同的效果。这种方式虽然不如CSS3弹性布局布局方便，但提供了兼容性的保障。我们需要在CSS文档中为这些元素添加一个错误容错样式。下面是一个例子：

.container {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  /* fallback */
  display: block;
}

.container > * {
  /* fallback */
  margin-right: 10px;
  margin-bottom: 10px;
}

@media (min-width: 600px) {
  .container {
    /* fallback */
    display: table;
  }
  .container > * {
    /* fallback */
    float: left;
    margin-right: 10px;
  }
  .container > *:last-child {
    /* fallback */
    margin-right: 0;
  }
} 

3. 选择哪些Flexbox功能要使用。因为弹性布局有许多的功能性属性，新的Flexbox规范也可能对这些属性进行更改。如果不支持全部的Flexbox属性，可能需要挑选一些较为简单的属性来使用。这也是我们在设计样式时要考虑的因素之一。

总之，CSS3弹性布局是一种非常实用的布局方式，它让我们可以更加方便地控制页面的元素布局。虽然目前还有一些浏览器不支持，但随着现代浏览器技术的日益成熟，我们相信这种布局方式会被越来越广泛运用。