Question

嘿，我正在摇摆一个弹性框布局。

我在chrome中有一个问题，标签div中的空格似乎在行的底部创建了一些额外的空间，在Internet Explorer中它很好并且在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错误（空间） Chrome space(Error) Chrome确定（没有空间） chrome ok (no space) IE ok（空格） enter image description here

Answer 1

当您使用 flexboxes 时，您需要了解容器Flexbox的哪些属性以及哪些属性与子/项目相关（check this article）;

对于前。在没有容器flex:1的项目上设置display:flex没有意义（在您的代码中找到了一些......）

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

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

1 个答案:

fiddle