我正在学习如何在 HTML5 中使用 flex 盒子模型，并遇到无法控制我的盒子高度的问题，我尽可能缩短了这段代码。
<html lang="en">
<head>
<title>Welcome to my site</title>
<meta charset="utf-8"/>
<style type="text/css">
#mommy {
border: 2px solid blue;
display: -moz-box;
-moz-box-orient: horizontal;
width: 700px;
height: 300px;
-moz-box-pack: center;
}
#mommy div {
padding: 20px;
margin: 10px;
border-radius: 20px;
-moz-box-flex: 1;
height: 100px;
}
#kid1 {
border: 2px solid red;
background: green;
}
#kid2 {
border: 2px solid red;
background: yellow;
}
#kid3 {
border: 2px solid red;
background: red;
}
#kid4 {
border: 2px solid red;
background: orange;
}
</style>
</head>
<body>
<section id="mommy">
<div id="kid1">Child 1</div>
<div id="kid2">Child 2</div>
<div id="kid3">Child 3</div>
<div id="kid4">Child 4</div>
</section>
</body>
</html>
我检查并添加了 -webkit 扩展，它在 Chrome 中运行良好，但在我使用的 Firefox 中运行不正常。
最佳答案
这样效果会更好。我稍微更新了 flexbox 规则。
来源:https://css-tricks.com/using-flexbox/
<html lang="en">
<head>
<title>Welcome to my site</title>
<meta charset="utf-8"/>
<style type="text/css">
#mommy {
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */
display: flex; /* Modern browsers */
border: 2px solid blue;
width: 700px;
height: 300px;
}
#mommy div {
-webkit-box-flex: 1; /* iOS 6-, Safari 3.1-6 */
width: 20%; /* For old syntax, otherwise collapses. */
-ms-flex: 1; /* IE 10 */
-webkit-flex: 1; /* Safari 6.1+. iOS 7.1+ */
flex: 1; /* Modern browsers */
padding: 20px;
margin: 10px;
border-radius: 20px;
height: 100px;
}
#kid1 {
border: 2px solid red;
background: green;
}
#kid2 {
border: 2px solid red;
background: yellow;
}
#kid3 {
border: 2px solid red;
background: red;
}
#kid4 {
border: 2px solid red;
background: orange;
}
</style>
</head>
<body>
<section id="mommy">
<div id="kid1">Child 1</div>
<div id="kid2">Child 2</div>
<div id="kid3">Child 3</div>
<div id="kid4">Child 4</div>
</section>
</body>
</html>关于html - 控制 Flex Box 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38451141/