要使弹性框在所有 Web 浏览器上运行，请使用 flex 的最小宽度和最大宽度等效值。例如，对于这个 -
<span style="color:#000000">min-width: 40%;
max-width: 40%;
</span>
使用 CSS 速记属性。它指出灵活生长|柔性收缩|弹性基础，如以下语法所示 -
<span style="color:#000000">flex: flex-grow flex-shrink flex-basis|auto;
</span>
对于上述内容，我们可以将 Flex 设置为 -
<span style="color:#000000">flex: 0 0 40%;
</span>
现在让我们看看一个适用于所有 Web 浏览器的 Flexbox 示例。我们的父 div 父框内有两个 div -
<div class='parentBox'>
<div class='childBox'>
<div class='babyChildBox'>Parent's Child
</div>
<div class='babyChildBox'>Parent's Child
</div>
</div>
<! - - - !-->
</div>
父容器的样式。我们使用了 CSS Flex 速记属性 -
.parentBox { display: flex; flex: 1 0 100%; background-color:yellow; border: 3px solid skyblue; }
对于 child，即 childBox，我们再次使用速记属性来设置灵活项目的灵活长度 -
.childBox { flex: 1 1 50% background-color: green; color: white; border: 1px solid blue; }
上述 .childBox 中的嵌套子项是使用 Flex 设置的。这个和上面的嵌套了弹性容器 -
.babyChildBox { flex: 1 1 50%; background-color: orange; }
例
这是完整的示例 -
<!DOCTYPE html>
<html>
<head>
<style> .parentBox { display: flex; flex: 1 0 100%; background-color:yellow; border: 3px solid skyblue; } .childBox { flex: 1 1 50% background-color: green; color: white; border: 1px solid blue; } .babyChildBox { flex: 1 1 50%; background-color: orange; }
</style>
</head>
<body>
<h1>Implementing Flex
</h1>
<div class='parentBox'>
<div class='childBox'>
<div class='babyChildBox'>Parent's Child
</div>
<div class='babyChildBox'>Parent's Child
</div>
</div>
<div class='childBox'>
<div class='babyChildBox'>Parent's Child
</div>
<div class='babyChildBox'>Parent's Child
</div>
</div>
</div>
</body>
</html>
输出
