CSS中的flex布局是一种强大的方式，可以使开发者更高效地排列页面元素。然而，由于不同浏览器的实现不同，会导致flex布局在不同浏览器中的兼容性问题。本文将介绍如何在不同浏览器中实现flex布局，以避免兼容性问题。

/* 声明flex布局容器 */
.container {
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
/* 声明flex子元素 */
.item {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}

在这个例子中，我们使用了"-webkit-"前缀来实现Safari 6.1+的支持，使用了标准的"flex"属性来实现其他浏览器的支持。在实际开发中，我们需要针对不同的浏览器，分别使用对应的前缀来实现flex布局的兼容，如下所示：

/* Chrome 29+/Opera 12.1+/Safari 6.1+ */
.container {
display: -webkit-flex;
display: flex;
}
/* Firefox 22+ */
.container {
display: flex;
display: -moz-box;
}
.item {
flex: 1;
-moz-box-flex: 1;
}
/* Internet Explorer 10 */
.container {
display: -ms-flexbox;
display: flex;
}
.item {
-ms-flex: 1;
flex: 1;
}
/* Internet Explorer 9 */
.container {
display: -ms-flexbox;
}
.item {
-ms-flex: 1;
}
/* Android 4.4+ */
.container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}

在这个例子中，我们通过使用不同前缀，实现了对Chrome、Opera、Safari、Firefox、IE9、IE10、Android等不同平台的支持。这种方式虽然比较繁琐，但是可以避免flex布局在不同浏览器中的兼容性问题。