0
Mit flexbox zum ersten Mal arbeiten, und in einigen Schwierigkeiten, vor allem mit IE (11).Flexbox Probleme
JS Fiddle und Screenshot (IE/Firefox):
https://jsfiddle.net/htw690wz/
https://postimg.org/image/h5et26w9r/
Ein paar Probleme, die ich bemerkt:
1) IE nicht/Schrumpfen der Inhalt Verpackung der passen Box.
2) Firefox (Chrome, Opera) zentriert nicht den Inhalt in der Box.
3) IE zeigt die Rückseite der Vorderseite der Box.
Jede Hilfe würde sehr geschätzt werden. Danke im Voraus.
Required Begleit Code:
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;
}