nicht angemeldet
Hallo
Es ist immer schwierig wenn die Angaben (hier Zeichnung und Quelltext) nicht zueinander passen.
Deshalb habe ich mal ein Beispiel erstellt das mit nur einer übergeordneten Klasse (uebersicht) auskommt. Die Container innerhalb des übergeordneten Containers können deshalb mehr oder weniger frei gewählt werden.
So entspricht der Quelltext der HTML-Vorgabe, dass Inhalt und Design möglichst getrennt werden sollen, und andererseits ist die Übersicht sehr vielfältig einsetzbar.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout mit Flexbox 01</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: 98%;
margin: 1rem auto;
}
}
/*Spezielle Einstellungen*/
@media all {
.uebersicht {
width: 400px;
padding: 0.2rem;
border: 2px solid blue;
display: flex;
flex-wrap: wrap;
}
.uebersicht h3 {
font-size: 1.2rem;
margin: 0.2rem 0;
}
.uebersicht h4 {
font-size: 1rem;
margin: 0.2rem 0;
}
.uebersicht p {
font-size: 1rem;
margin: 0.2rem 0;
}
.uebersicht li {
list-style-type: none;
}
.uebersicht>:nth-child(1) {
padding: 0.2rem;
border: 2px solid orange;
margin: 0.2rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
}
.uebersicht>:nth-child(2n+2) {
padding: 0.2rem;
border: 2px solid green;
margin: 0.2rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 150px;
}
.uebersicht>:nth-child(2n+3) {
padding: 0;
border: 0;
margin: 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 150px - 0.4rem - 4px - 0.4rem);
}
.uebersicht>:nth-child(2n+3)>* {
padding: 0.2rem;
border: 2px solid gold;
margin: 0.2rem;
}
.uebersicht>:nth-child(5)>* {
border-color: red;
}
.uebersicht>:nth-child(7)>* {
border-color: aqua;
}
.uebersicht>:nth-child(9)>* {
border-color: purple;
}
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<article class="uebersicht">
<h3>Überschrift h3</h3>
<aside>
<h4>1993</h4>
</aside>
<div>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
</div>
<aside>
<h4>1994</h4>
</aside>
<div>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
</div>
<aside>
<h4>1995</h4>
</aside>
<div>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
<section>
<p>section</p>
</section>
</div>
<aside>
<h4>1995</h4>
</aside>
<ul>
<li>
<p>li</p>
</li>
<li>
<p>li</p>
</li>
<li>
<p>li</p>
</li>
<li>
<p>li</p>
</li>
</ul>
</article>
</main>
<footer>
</footer>
</body>
</html>
Gruss
MrMurphy
Matthias Apsel
marctrix
MudGuard
Tabellenkalk