Hallo
Zitat
Die Frage ist, kann ich denn innerhalb von 2 flex divs, eine solche Anordnung machen, oder muss ich jetzt mehrere display-flex divs untereinander anlegen?
So wie ich deinen Text verstanden habe: weder - noch.
Flexbox erstellt reine Eltern-Kinder-Beziehungen. Eltern = flex-container, Kinder = flex-items
"2 flex-divs", also wahrscheinlich zwei flex-container, sind Geschwister und können nicht aufeinander reagieren.
Mit "mehreren display-flex-divs", also mehreren flex-containern, meinst du wohl, dass der Quelltext zersplittert wird. Also in den ersten flex-container die beiden Überschriften und der erste Absatz. In den zweiten flex-container die beiden farblich hinterlegten Texte. Und so weiter. Damit könntest du zwar das von dir gewünschte Layout erreichen. Sachlich wäre der Quelltext aber totaler Unsinn - sowas geht gar nicht.
Die Lösung ist einen flex-container zu erstellen. In den flex-container kommen für jede Spalte gleich viele div als flex-items. In die flex-items kommt dann der eigentliche Inhalt.
In dem folgenden Beispiel ging es mir darum die Technik aufzuzeigen. Die Farben, Abstände, Rahmen, Schriften, Media Queries ... kannst / musst du dann deinen Vorstellungen anpassen.
Das Beispiel ist für 4 flex-items in jeder Spalte ausgelegt. Weniger ist kein Problem, bei mehr muss das CSS erweitert werden.
Korrektur: Das Beispiel funktioniert nur mit 4 flex-items in jeder Spalte. Bei weniger oder mehr muss das CSS angepasst / erweitert werden. Es können aber leere flex-items verwendet werden. Wenn dabei zwei "nebeneinanderstehende" (also zum Beispiel das 3. und das 7.) leer bleiben, werden sie nicht angezeigt.
Bei width/height, padding, border, margin habe ich das Border-Box-Modell verwendet (box-sizing: border-box). Beim klassischen Content-Box-Modell müssen die Werte im CSS angepasst werden.
Ich habe wie heutzutage üblich nur einen Klassennamen "zweispalten" verwendet und den Inhalt des flex-items mit Selektoren gestaltet. Den Klassennamen kannst du natürlich anpassen. Durch dieses Vorgehen wird der HTML-Quelltext übersichtlicher. Ein weiterer Vorteil ist, dass das CSS auch einfacher für andere Seiten verwendet werden kann.
HTML:
<section class="zweispalten">
<div>
<h2>Lackschadenfreie Ausbeultechnik</h2>
<p>adshdahsd jkask asgkdsag aks dgadg ashdg ah dgasgashkg dahka gs kasg ahkgd ahkgd asgd haksg dasdg ahsd ghasg ashg das</p>
</div>
<div>
<p>hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd</p>
</div>
<div>
<p>Wir beseitigen Dellen ohne Lackierung. Bereits seit Jahren wenden wir diese Art des Ausbeulens bei Parkschaden und Hagelschäden erfolgreich an. Durch Hebeln mit speziellen Werkzeugen werden Dellen ohne Beschädigung des Lacks entfernt. Diese Technik wird besonders bei Hagelschäden angewandt.</p>
</div>
<div>
<p>Anwendungsgebiete:</p>
<p>Leichter Karosserieschaden • Hagel bzw. Unwetterschäden • Ein und Ausparkschaden • Leichte Unfallschäden. </p>
</div>
<div>
<h2>Ausziehtechnik</h2>
</div>
<div>
<p>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd</p>
</div>
<div>
<p>Teile-Instandsetzung ohne Neuteilbeschaffung. Diese Technik ist eine innovative Reparatur-Methode im Bereich der Karosserieinstandsetzung. Durch Hebeln mit der Zugbrücke lassen sich Dellen kontrolliert und zielgenau rückverformen. Anschliessend wird das reparierte Teil lackiert.</p>
</div>
<div>
<p>Unsere Leistung:</p>
<p>Karosserieschäden jeglicher Art • Innovative Reparatur-Methode!</p>
</div>
</section>
Alles anzeigen
CSS:
* {
box-sizing: border-box;
}
.zweispalten {
background-color: hsla(210, 13%, 50%, 0.5);
padding: 1rem 0.5rem;
margin: 0.5rem;
display: flex;
flex-wrap: wrap;
}
.zweispalten>* {
background-color: white;
padding: 0 1rem;
margin: 0 0.5rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 1rem);
}
.zweispalten>*:nth-child(1) {
background-color: hsla(180, 100%, 50%, 0.5);
order: 1;
}
.zweispalten>*:nth-child(2) {
background-color: hsla(120, 93%, 79%, 0.5);
border-bottom: 2px solid black;
order: 3;
}
.zweispalten>*:nth-child(3) {
background-color: hsla(51, 100%, 50%, 1);
order: 5;
}
.zweispalten>*:nth-child(4) {
background-color: hsla(6, 100%, 94%, 1);
order: 7;
}
.zweispalten>*:nth-child(5) {
background-color: hsla(180, 100%, 50%, 0.5);
order: 2;
}
.zweispalten>*:nth-child(6) {
background-color: hsla(120, 93%, 79%, 0.5);
border-bottom: 2px solid black;
order: 4;
}
.zweispalten>*:nth-child(7) {
background-color: hsla(51, 100%, 50%, 1);
order: 6;
}
.zweispalten>*:nth-child(8) {
background-color: hsla(6, 100%, 94%, 1);
order: 8;
}
.zweispalten>*:nth-child(4)>:first-child,
.zweispalten>*:nth-child(8)>:first-child {
font-weight: bold;
}
}
@media only screen and (max-width: 1000px) {
.zweispalten>*:nth-child(1n+1) {
flex-basis: calc(100% - 1rem);
order: 1;
}
}
Alles anzeigen
Ein Beispielquelltext für eine gesamte Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox Problem 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
}
/*Spezielle Einstellungen*/
@media all {
.zweispalten {
background-color: hsla(210, 13%, 50%, 0.5);
padding: 1rem 0.5rem;
margin: 0.5rem;
display: flex;
flex-wrap: wrap;
}
.zweispalten>* {
background-color: white;
padding: 0 1rem;
margin: 0 0.5rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 1rem);
}
.zweispalten>*:nth-child(1) {
background-color: hsla(180, 100%, 50%, 0.5);
order: 1;
}
.zweispalten>*:nth-child(2) {
background-color: hsla(120, 93%, 79%, 0.5);
border-bottom: 2px solid black;
order: 3;
}
.zweispalten>*:nth-child(3) {
background-color: hsla(51, 100%, 50%, 1);
order: 5;
}
.zweispalten>*:nth-child(4) {
background-color: hsla(6, 100%, 94%, 1);
order: 7;
}
.zweispalten>*:nth-child(5) {
background-color: hsla(180, 100%, 50%, 0.5);
order: 2;
}
.zweispalten>*:nth-child(6) {
background-color: hsla(120, 93%, 79%, 0.5);
border-bottom: 2px solid black;
order: 4;
}
.zweispalten>*:nth-child(7) {
background-color: hsla(51, 100%, 50%, 1);
order: 6;
}
.zweispalten>*:nth-child(8) {
background-color: hsla(6, 100%, 94%, 1);
order: 8;
}
.zweispalten>*:nth-child(4)>:first-child,
.zweispalten>*:nth-child(8)>:first-child {
font-weight: bold;
}
}
@media only screen and (max-width: 1000px) {
.zweispalten>*:nth-child(1n+1) {
flex-basis: calc(100% - 1rem);
order: 1;
}
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<section class="zweispalten">
<div>
<h2>Lackschadenfreie Ausbeultechnik</h2>
<p>adshdahsd jkask asgkdsag aks dgadg ashdg ah dgasgashkg dahka gs kasg ahkgd ahkgd asgd haksg dasdg ahsd ghasg ashg das</p>
</div>
<div>
<p>hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd</p>
</div>
<div>
<p>Wir beseitigen Dellen ohne Lackierung. Bereits seit Jahren wenden wir diese Art des Ausbeulens bei Parkschaden und Hagelschäden erfolgreich an. Durch Hebeln mit speziellen Werkzeugen werden Dellen ohne Beschädigung des Lacks entfernt. Diese Technik wird besonders bei Hagelschäden angewandt.</p>
</div>
<div>
<p>Anwendungsgebiete:</p>
<p>Leichter Karosserieschaden • Hagel bzw. Unwetterschäden • Ein und Ausparkschaden • Leichte Unfallschäden. </p>
</div>
<div>
<h2>Ausziehtechnik</h2>
</div>
<div>
<p>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd</p>
<p>hhh dasd sd hhh dasd sd</p>
</div>
<div>
<p>Teile-Instandsetzung ohne Neuteilbeschaffung. Diese Technik ist eine innovative Reparatur-Methode im Bereich der Karosserieinstandsetzung. Durch Hebeln mit der Zugbrücke lassen sich Dellen kontrolliert und zielgenau rückverformen. Anschliessend wird das reparierte Teil lackiert.</p>
</div>
<div>
<p>Unsere Leistung:</p>
<p>Karosserieschäden jeglicher Art • Innovative Reparatur-Methode!</p>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
Alles anzeigen
Und der Link zu einer Beispielseite zum direkten Ausprobieren:
http://boratb.bplaced.net/index12.html
Gruss
MrMurphy
