Question

我用更简单的测试用例更新了这个问题。下面的示例是我一直坚持的问题。如果您在浏览器中运行HTML，屏幕将呈现，如下面的第一个屏幕截图所示。但是，如果您随后手动进入Web检查器并手动调整窗口包装器标记，如下所示：

flex-grow：1;

屏幕将根据需要进行渲染 - 请参阅第二个屏幕截图。我不明白为什么在页面加载时窗口包装器标签中没有维护flex-grow标签。这种情况发生在所有浏览器中，因此我必须遗漏一些东西。

提前感谢所有帮助。

屏幕截图

屏幕截图已修复

<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE>TEST</TITLE>
<STYLE TYPE="TEXT/CSS">

body {
    background-color: #e9e9e9;
    font-size: 14px;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
html {
    background: #e9e9e9;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
html, body, .viewport {
    width: 100%;
    height: 100%;
    margin: 0;
}
#top_wrapper {
    height: 80px;
    min-width:885px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    background-color:#ff4422
}
#window_wrapper {
    background-color:#ffffff;
    border: .2em solid gray;
    flex-grow: 1;
}
#page-head {
    width:730px;
    margin-top:12px;
    margin-left:auto;
    margin-right:auto;
    padding: 5px 0px 5px 0px;
    font-size:1.7em;
    color:black;
    background-color:green;
    text-align:center;
}
#page {
    width:716px;
    min-height:280px;
    margin-left:auto;
    margin-right:auto;
    background-color:#ffffff;
    text-align:center;
}
#title {
    width:500px;
}
#bottom-wrapper {
    height: 40px;
    min-width:885px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    background-color:#ff4422;
}
</STYLE>
</HEAD>
<BODY>
<div id="top_wrapper"></div>
<div id="window-wrapper">
    <div id="page-head">Page Title</div>
    <div id="page"></div>
</div>
<div id="bottom-wrapper"></div>
</BODY>

我们如何使用柔性盒正确地垂直和水平弯曲嵌入元素？

0 个答案: