Fix schief Flexboxes

Question

Ich muss eine Website mit schiefen CSS-Design zu tun. Das Ziel ist, eine ähnliche Konstruktion:

und mein Ergebnis nach einiger Codierung ist die folgende:

in der Black Box können Sie das Problem sehen: die ABC-Container in den richtigen Positionen Arent. Wie kann ich das beheben?

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
} 
 

 
a { 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    align-self: left; 
 
    flex-direction: row; 
 
    width: 70%; 
 
    height: 100%; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    flex-wrap: wrap-reverse; 
 
    float: right; 
 
} 
 

 
.flex-content { 
 
    transform: skew(-5.5deg); 
 
    background-color: red; 
 
    height: 33%; 
 
    text-align: center; 
 
    width: 45%; 
 
    margin: 5px 5px 5px 50px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.underlay-box { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.overlay-box { 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform: skew(-5.5deg); 
 
    float: left; 
 
} 
 

 
.gmk { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px red solid; 
 
    /*background: url('bild1.jpg'); */ 
 
    background-size: cover; 
 
}

<div class="underlay-box"></div> 
 
<div class="overlay-box"></div> 
 
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
    <div class="gmk"><a href="mediothek.html">A</a></div> 
 
    </div> 
 
    <div class="flex-content"><a href="mediothek.html">B</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">F</a></div> 
 
</div>

ich Hilfe schätzen würde :) Danke, Jonas

Answer 1

Änderungen vorgenommen:

• Skew der Flex-Container anstelle jedes einzelnen Element Schrägstellung.
• Verwenden Sie skewX() statt nur skew().
• Berechnen Sie die Flex-Basis der Komponente, indem Sie die Rahmengröße und die Trennungsbreite der einzelnen Flex-Elemente reduzieren.
• Nutzen Sie einfach die Unterlegbox für das linke Panel, indem Sie es schräg stellen und auf -5% nach links verschieben.
• Die Breite des Flex-Containers so vergrößern, dass er den Körper nach rechts überläuft.
• Verbergen Sie das Überlauf-x des Body-Tags, um das Scrollen zu deaktivieren.

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    overflow-x:hidden; 
 
} 
 

 
a { 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    align-self: left; 
 
    flex-direction: row; 
 
    width: 80%; 
 
    height: 100%; 
 
    transform: skewX(-5.5deg); 
 
    background-color: white; 
 
    overflow: hidden; 
 
    flex-wrap: wrap-reverse; 
 
    position: absolute; 
 
    left: 25%; 
 
    
 
} 
 

 
.flex-content { 
 
    background-color: red; 
 
    border:2px solid black; 
 
    flex: 0 1 calc(32% - 2px); 
 
    display: flex; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 

 
.flex-content:hover{ 
 
background-color:gray; 
 
transition:all 0.3s ease-in-out; 
 
} 
 

 
.underlay-box { 
 
    position: absolute; 
 
    left: -5%; 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform: skewX(-5.5deg); 
 
} 
 

 
.gmk { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px red solid; 
 
    /*background: url('bild1.jpg'); */ 
 
    background-size: cover; 
 
}

<div class="underlay-box"></div> 
 
<div class="overlay-box"></div> 
 
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
    <div class="gmk"><a href="mediothek.html">A</a></div> 
 
    </div> 
 
    <div class="flex-content"><a href="mediothek.html">B</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">F</a></div> 
 
</div>

Answer 2

Ich glaube, der bessere Ansatz der skew auf der .flex-container anzuwenden wäre.

Das grundlegende Problem ist, dass Sie jedes Element einzeln verzerren, so dass es an Ort und Stelle verzerrt ist. Wenn Sie den Behälter schräg stellen, wird sein Inhalt ebenfalls geneigt, während er der äußeren Form folgt.

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height:100%; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
} 
 
a { 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    align-self: left; 
 
    flex-direction: row; 
 
    width: 70%; 
 
    height: 100%; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    flex-wrap: wrap-reverse; 
 
    float: right; 
 
    transform: skew(-5.5deg); 
 
} 
 

 
.flex-content { 
 
    background-color: red; 
 
    height: 33%; 
 
    text-align: center; 
 
    width: 45%; 
 
    margin: 5px 5px 5px 15px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.underlay-box { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.overlay-box { 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform: skew(-5.5deg); 
 
    float: left; 
 
} 
 

 
.gmk { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px red solid; 
 
    /*background: url('bild1.jpg'); */ 
 
    background-size: cover; 
 
    box-sizing:border-box; 
 
}

<div class="underlay-box"></div> 
 
<div class="overlay-box"></div> 
 
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
    <div class="gmk"><a href="mediothek.html">A</a></div> 
 
    </div> 
 
    <div class="flex-content"><a href="mediothek.html">B</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">F</a></div> 
 
</div>