css - 将flexbox元素置于Flex容器内

我发现以下代码的外观有所不同：

<html>
<style>
#outer{
    display:flex;
    border: 2px solid #73AD21;
    width:50%;
    height:25%;
}
#b1{
    display:flex; /*I don't want to edit this, but it is the cause of inconsistency*/
    flex:1;
}
#b2{
    display:inline;
    flex:1;
}
</style>
<head>
</head>
<body>
<div id=outer>
    <button id=b1>hi</button>
    <button id=b2>hello</button>
</div>
</body>
</html>

我希望b1中的文本在所有三个浏览器中都像firefox一样居中，但我不想更改指示的行。我希望元素能够保持“flex：display”。我该怎么做？

上面显示的浏览器顺序：Firefox，IE，Chrome。

版本：Firefox 46.0.1，IE 11.0.9600，Crhome 50.0.2661.94。

将flexbox元素置于Flex容器内

0 个答案: