Flexbox Problems

第一次使用flexbox，遇到了一些麻烦，尤其是IE(11)。

JS截图(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;
}

我没有尝试，但我认为问题是伸缩方向

你必须定义:

font - family:宋体;

试试这个网站，他很有帮助:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我做了一个微框架来简化flex的使用，你可以尝试一下;)

https://drive.google.com/a/hortis.ch/file/d/0B1sGApXQRMPoUU9ZS0YyZFgySW8/view?usp=sharing

相关内容

最新更新

热门标签：