我有一个复杂的布局,我用Flexbox垂直和水平地对齐各种元素.
然后最后一个元素margin-right:auto;应用于向左推动元素(并否定它们的居中).
这在除了IE10/11之外的任何地方都能正常工作并且让我发疯.
HTML/CSS示例:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}<div id='container'>
<div …css internet-explorer flexbox internet-explorer-10 internet-explorer-11
我正在尝试使用flexbox进行简单的设计,但我遇到了IE11的问题.基本上,我想要一个仅在内容不够高时才能粘在底部的页脚.我这样做对Chrome没有任何问题:
*,
*:after,
*:before {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}<header>
Header
</header>
<main>
<p>Main</p>
<p>Main</p>
<p>Main</p>
<p>Main</p>
<p>Main</p>
</main>
<footer>
Footer
</footer>只需<p>main</p>使用IE11来查看错误行为的数量即可.
有没有办法在没有JavaScript的情况下实现这一目标？