我有一个相当独特的情况，它似乎在所有浏览器中都有效，除了 Internet Explorer 11 似乎，所以这是我试图解决的主要用例。
我正在研究涉及利用 display: flex; 的网站布局的想法在 <body> 上以适应各种布局情况。具体来说，一个涉及在侧面有一个“导航栏”，在左边有一个网站的内容。使用 flex-grow: 1;内容允许我填充导航栏之后的剩余空间，以及当我必须在某个断点处隐藏导航栏时自动填充浏览器窗口的整个宽度。
但是，如果我添加 max-width到内容并尝试使用 margin: 0 auto; 将其置于剩余空间的中心, 它在 Internet Explorer 11 中失败。
Here is a working example of this problem.
/* Code to Troubleshoot
// ----------------- */
body {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex-basis: 160px;
flex-basis: 160px;
z-index: 2;
}
main {
-webkit-flex: 1;
flex: 1;
position: relative;
min-width: 1px;
max-width: 400px;
margin: 0 auto;
z-index: 1;
}
/* Presentational Styles
// ------------------ */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: 300;
color: #bbb;
background-color: #eaeaea;
}
nav,
main {
height: 100vh;
background-color: #fff;
box-shadow: 0 0.15em 0.65em rgba(0, 0, 0, 0.15);
}
nav {
counter-reset: linkCount;
}
nav i {
display: block;
border-bottom: 1px solid #eaeaea;
padding: 0.925em 1em;
font-style: normal;
line-height: 1;
}
nav i:before {
counter-increment: linkCount;
content: "Link " counter(linkCount);
}
main:before {
content: "Main Content";
display: block;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}<nav>
<i></i>
<i></i>
<i></i>
</nav>
<main></main>最终，以下所有内容都是我正在努力的方向:
- 内容区域始终填充导航栏之后的剩余空间(如果导航栏隐藏在特定断点处，将继续自动填充)。
- 需要能够分配一个可选的
max-width在内容区域并将内容居中放置在<body>的剩余空间内.目前我正试图通过margin: 0 auto;做到这一点在内容上，它适用于除 Internet Explorer 11 之外的所有浏览器(我尚未在移动设备上测试过，但所有其他桌面浏览器似乎都符合要求)。 - 如果内容区域变得足够小，则需要正常缩小。
最佳答案
在 flex 布局方面，IE 11 漏洞百出。但通常有解决方法。
在这种情况下，只需对 main 元素进行以下两项调整:
main {
flex: 1 1 auto; /* 1 */
position: relative;
min-width: 1px;
max-width: 400px;
margin: 0 auto;
z-index: 1;
width: 100%; /* 2 */
}
我根据这两个帖子进行了调整:
关于html - 在剩余空间中水平居中最大宽度的 flexbox 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41640089/