嘿，我目前正在使用 flex box 布局。
我在 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 正常(无空格)
IE 正常(空格)
最佳答案
当您使用flexboxes时，您需要了解哪些属性用于容器flexbox，哪些属性与子项/元素相关( check this article );
例如。在没有容器 display:flex 的元素上设置 flex:1 没有意义(在您的代码中发现了其中一些...)
纠正这些 .field 不会溢出(在 chrome 和 ff 上测试)；
fiddle
关于css - 带空格的 chrome 中的 Flexbox 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31148760/