flex布局浏览器兼容性

Flex布局是一种新的布局方式，它可以让我们更加方便地实现页面布局。下面是Flex布局在不同浏览器中的兼容性情况：

- Chrome、Firefox、Safari、Opera、Edge等现代浏览器都支持Flex布局，且支持程度较好。
- IE10及以上版本也支持Flex布局，但需要使用-ms前缀。
- 在移动端，iOS 6以上版本的Safari和Android 4.4以上版本的浏览器都支持Flex布局。

因此，可以说Flex布局的兼容性非常好，几乎所有现代浏览器都支持。如果需要兼容IE10及以下版本，只需要加上-ms前缀即可。

下面是一个简单的Flex布局的例子：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  margin: 10px;
  background-color: #ccc;
}

这个例子中，我们使用了Flex布局来实现一个容器和三个项目的布局。容器使用了`display: flex`来指定使用Flex布局，`justify-content: space-between`来指定项目之间的间距。项目使用了`flex: 1`来指定它们的宽度平分容器的剩余空间。