chrome 中带有空格的 Flexbox 布局问题

Question

嘿，我目前正在使用 flex box 布局。

我在 chrome 中遇到问题，标签 div 中的 space 似乎在行的底部创建了一些额外的 space原因，在 Internet Explorer 中没问题，在没有 space 的 chrome 中没问题。

<!DOCTYPE html>
<html>
<head>
<style>
div.popup-body{
    width:500px;
    margin:0 auto;
}

div.popup-form-container{
    display:flex;
    flex:1;
    flex-direction:column;
    background-color:green;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-self: center;
}

div.popup-form-control-container{
    box-sizing: border-box;
}

div.checkbox-container{
    display:flex;
    flex:1;
    flex-direction:row;
}

div.checkbox-label{
    flex:1;
    font-family:Segoe UI;
    background-color:lightgrey;
    padding:10px;
    text-align:center;
    box-sizing:border-box;
}

div.checkbox-control{
    flex:1;
    font-family:Segoe UI;
    background-color:white;
    padding:10px;
    text-align:center;
    box-sizing:border-box;
}

div.field{
    flex:none;
    background-color:purple;
    border: 5px solid yellow;
}

</style>
</head>
<body>
    <div class="popup-body">
        <div class="popup-form-container">
            <div class="field">
                <div class="popup-form-control-container">
                    <div class="checkbox-container">
                        <div class="checkbox-label">Hello world</div>
                        <div class="checkbox-control">
                            <input type="checkbox"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JS FIDDLE: https://jsfiddle.net/4246r1f1/

屏幕截图：

Chrome 错误 (space) Chrome 好的（没有 space） IE 正常 (space)

Answer 1

当您使用 flexboxes 时，您需要了解哪些属性用于容器 flexbox，哪些与 child/items( check this article );

例如。在没有容器 display:flex 的项目上设置 flex:1 没有意义（在您的代码中发现了其中一些...）

更正这些 .field 不会溢出（在 chrome 和 ff 上测试）；

chrome 中带有空格的 Flexbox 布局问题

Flexbox layout issue in chrome with spaces

html

css

layout

flexbox

fiddle