【发布时间】：2017-03-16 10:25:15
【问题描述】：
第一次使用 flexbox，遇到了一些麻烦，尤其是 IE (11)。
JS Fiddle 和截图（IE/Firefox）：
https://jsfiddle.net/htw690wz/
https://postimg.org/image/h5et26w9r/
我注意到的几个问题：
1) IE 没有缩小/包装内容以适应框。
2) Firefox（Chrome、Opera）不在框中的内容居中。
3) IE 显示盒子正面的背面。
任何帮助将不胜感激。提前致谢。
必填随附代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class = "MCWrapper" id="MCWrapper">
<div class = "MC" id = "MC3">
<div id="f1_container">
<div id="f1_card">
<div class="front face">
<p>Test text - this is a bit long for a single line, isn't it? I mean, come on... give me a break here. How long does text have to be these days?</p>
<a href = "canvas.jpg" target="_blank"><img src = "canvas.jpg"></a>
</div>
<div class="back face">
<p>This is the back of the card.</p>
Blah blah blah
</div>
</div>
</div>
</div>
Footer Text
</div>
</body>
</html>
CSS：
html {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
background: url('bg.jpg'), rgba(0,0,0,0.5);
background-repeat: no-repeat;
background-attachment: stretch;
background-position: center;
background-size:100% 100%;
width:100%;
margin:0;
height:100%;
overflow:hidden;
}
body{
display: flex;
justify-content: flex-end;
align-items: center; /* align vertical */
max-width:1900px;
min-height:725px;
height:725px;
margin:0 auto;
width:100%;
height:100%;
}
.MCWrapper {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
flex-direction: column;
width:100%;
height:100%;
min-height:auto;
min-width:auto;
background-repeat: no-repeat;
background: url('cover-bg.jpg'), rgba(0,0,0,0.5);
background-attachment: stretch;
background-position: center;
background-size:100% 100%;
color:rgba(255,255,255,1);
border:solid 2px transparent;
border-radius:25px;
padding:0.5em;
color: hsla(280, 90%, 20%, 1);
}
.MC{
position:relative;
width:0%;
height:66.6%;
display:flex;
font-size:1.15em;
background:rgba(255,255,255,1);
color:rgba(0,0,0,1);
padding:1em;
margin:1em;
border:solid 2px black;
border-radius:15px;
overflow:auto;
}
.MC:nth-of-type(1) {
background:rgba(51,51,255,0.75);
width:90%;
}
.MC:nth-of-type(2){
background:rgba(19,187,156,0.75);
width:90%;
}
.MC:nth-of-type(3){
background:rgba(248,238,30,0.75);
flex-wrap:wrap;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.MC:nth-of-type(4){
background:rgba(248, 30, 149,0.75);
}
.MC:nth-of-type(5){
background:rgba(238,30,248,0.75);
}
.MC:nth-of-type(6){
}
a{
color: hsla(280, 90%, 20%, 1);
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
*, *:before, *:after {
box-sizing:inherit;
}
img {
max-width:97.5%;
border-radius:15px;
}
#f1_container {
position: relative;
margin: 10px auto;
width: 27.5%;
height: 95%;
z-index: 1;
perspective: 1000;
border: solid 2px black;
border-radius:15px;
margin:1em;
font-size:1em;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.666s linear;
}
.face {
display:flex;
flex-direction:column;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-transform:rotateY(0deg);
}
.face.back {
transform: rotateY(180deg);
box-sizing: border-box;
text-align: center;
backface-visibility:hidden;
}
【问题讨论】：
标签： html css flexbox css-transitions