Fatal编程技术网
  • css/
  • Css chrome中带有空格的Flexbox布局问题

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

css html layout

Css chrome中带有空格的Flexbox布局问题,css,html,layout,flexbox,Css,Html,Layout,Flexbox,嘿，我现在正在摇摆一个灵活的盒子布局 我在chrome中遇到了一个问题，标签div中的一个空格似乎无缘无故地在行的底部创建了一些额外的空间，在internet explorer中这很好，而在没有空格的chrome中这很好 <!DOCTYPE html> <html> <head> <style> div.popup-body{ width:500px; margin:0 auto; } div.popup-form-contain

嘿，我现在正在摇摆一个灵活的盒子布局

我在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>


第三部分{
宽度：500px；
保证金：0自动；
}
div.popup-form-container{
显示器：flex；
弹性：1；
弯曲方向：立柱；
背景颜色：绿色；
柔性包装：包装；
-webkit柔性包装：包装；
自对准：居中；
}
div.popup-form-control-container{
框大小：边框框；
}
div.checkbox-container{
显示器：flex；
弹性：1；
弯曲方向：行；
}
div.checkbox-label{
弹性：1；
字体系列：SegoeUI；
背景颜色：浅灰色；
填充：10px；
文本对齐：居中；
框大小：边框框；
}
div.checkbox-control{
弹性：1；
字体系列：SegoeUI；
背景色：白色；
填充：10px；
文本对齐：居中；
框大小：边框框；
}
分区域{
flex：无；
背景颜色：紫色；
边框：5px纯黄色；
}
你好，世界
JS小提琴：

屏幕截图：

Chrome错误（空格） Chrome ok（无空间）
IE ok（空格）

当您使用flexbox时，您需要了解哪些属性用于容器flexbox，哪些属性与子/项（）相关

例如，在没有容器的项目上设置
flex:1
，
display:flex
没有意义（在您的代码中找到了其中一些…）

纠正这些问题，
.field
不会溢出（在chrome和ff上测试）

您这样做是为了创建一列字段？只是使用flexbox创建一个两列的行、标签和控件。下面会有更多这样的行。flex:1没有显示：flex似乎仍然可以正常工作。。我昨天自己设法解决了这个问题，但我会在你的解决方案奏效时给出答案。