Versions-Historie des Beitrags „Flex-Box“

Flex-Box

bearbeitet von MrMurphy1 27.09.2015 01:49

Hallo,

hier der Quelltext für die Testdatei ohne Inhalt. Das body-Element hat zur Kennzeichnung einen deutlichen roten Rahmen und Fensterhöhe. Die einzelnen div haben noch keine Höhenangaben.

Du kannst so zum Beispiel mal die Höhe des body entfernen (auskommentieren) und schauen was passiert.

Die Zahlen im body-Bereich und CSS-Quelltext ( nth-child() ) stimmen überein, so dass eine direkte Zuordnung immer problemlos möglich ist. Die Farbbezeichnungen befinden sich ebenso im body-Bereich und ihm CSS-Quelltext.

~~~
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
margin: 0;
}
}

/*Grundeinstellungen für diese Seite*/
@media all {
}

/*Spezielle Einstellungen*/
@media all {
body {
border: 3px solid;
}
body > * {
padding: 0.5rem;
border: 1px solid;
border-radius: 0.5rem;
margin: 0.5rem;
}
h2 {
padding: 0.5rem;
margin: 0;
}
}

/*Farben*/
@media all {
html {
}
body {
border-color: red;
}
body > * {
border-color: silver;
}
body > :nth-child(1) {
background-color: blue;
}
body > :nth-child(2) {
background-color: yellow;

}
body > :nth-child(3) {
background-color: orange;
}
body > :nth-child(4) {
background-color: green;
}
body > :nth-child(5) {
background-color: gray;
}
body > :nth-child(6) {
background-color: gold;
}
}

/*Flexbox Grundlayout*/
@media all {
body {
display: flex;
}
body > * {
}
body > :nth-child(1) {
}
body > :nth-child(2) {
}
body > :nth-child(3) {
}
body > :nth-child(4) {
}
body > :nth-child(5) {
}
body > :nth-child(6) {
}
}

/*Spezielle Höhenangaben*/
@media all {
body {
min-height: 100vh;
}
body > * {
}
body > :nth-child(1) {
}
body > :nth-child(2) {
}
body > :nth-child(3) {
}
body > :nth-child(4) {
}
body > :nth-child(5) {
}
body > :nth-child(6) {
}
}

</style>
</head>
<body>
<div>
<h2>1 blue</h2>
</div>
<div>
<h2>2 yellow</h2>
</div>
<div>
<h2>3 orange</h2>
</div>
<div>
<h2>4 green</h2>
</div>
<div>
<h2>5 gray</h2>
</div>
<div>
<h2>6 gold</h2>
</div>
</body>
</html>
~~~

Gruss

MrMurphy

Flex-Box

bearbeitet von MrMurphy1 27.09.2015 01:53

Hallo,

hier der Quelltext für die Testdatei ohne Inhalt. Das body-Element hat zur Kennzeichnung einen deutlichen roten Rahmen und Fensterhöhe:.

Die Zahlen im body-Bereich und CSS-Quelltext ( nth-child() ) stimmen überein, so dass eine direkte Zuordnung immer problemlos möglich ist. Die Farbbezeichnungen befinden sich ebenso im body-Bereich und ihm CSS-Quelltext.

~~~
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
margin: 0;
}
}

/*Grundeinstellungen für diese Seite*/
@media all {
}

/*Spezielle Einstellungen*/
@media all {
body {
border: 3px solid;
}
body > * {
padding: 0.5rem;
border: 1px solid;
border-radius: 0.5rem;
margin: 0.5rem;
}
h2 {
padding: 0.5rem;
margin: 0;
}
}

/*Farben*/
@media all {
html {
}
body {
border-color: red;
}
body > * {
border-color: silver;
}
body > :nth-child(1) {
background-color: blue;
}
body > :nth-child(2) {
background-color: yellow;

}
body > :nth-child(3) {
background-color: orange;
}
body > :nth-child(4) {
background-color: green;
}
body > :nth-child(5) {
background-color: gray;
}
body > :nth-child(6) {
background-color: gold;
}
}

/*Flexbox Grundlayout*/
@media all {
body {
display: flex;
}
body > * {
}
body > :nth-child(1) {
}
body > :nth-child(2) {
}
body > :nth-child(3) {
}
body > :nth-child(4) {
}
body > :nth-child(5) {
}
body > :nth-child(6) {
}
}

/*Spezielle Höhenangaben*/
@media all {
body {
min-height: 100vh;
}
body > * {
}
body > :nth-child(1) {
}
body > :nth-child(2) {
}
body > :nth-child(3) {
}
body > :nth-child(4) {
}
body > :nth-child(5) {
}
body > :nth-child(6) {
}
}

</style>
</head>
<body>
<div>
<h2>1 blue</h2>
</div>
<div>
<h2>2 yellow</h2>
</div>
<div>
<h2>3 orange</h2>
</div>
<div>
<h2>4 green</h2>
</div>
<div>
<h2>5 gray</h2>
</div>
<div>
<h2>6 gold</h2>
</div>
</body>
</html>
~~~

Gruss

MrMurphy

Flex-Box

bearbeitet von MrMurphy1 27.09.2015 01:51

Hallo, hier der Quelltext für die Testdatei ohne Inhalt. Das body-Element hat zur Kennzeichnung einen deutlichen roten Rahmen und Fensterhöhe: ~~~ <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <style> /*Grundeinstellungen*/ @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { margin: 0; } } /*Grundeinstellungen für diese Seite*/ @media all { } /*Spezielle Einstellungen*/ @media all { body { border: 3px solid; } body > * { padding: 0.5rem; border: 1px solid; border-radius: 0.5rem; margin: 0.5rem; } h2 { padding: 0.5rem; margin: 0; } } /*Farben*/ @media all { html { } body { border-color: red; } body > * { border-color: silver; } body > :nth-child(1) { background-color: blue; } body > :nth-child(2) { background-color: yellow; } body > :nth-child(3) { background-color: orange; } body > :nth-child(4) { background-color: green; } body > :nth-child(5) { background-color: gray; } body > :nth-child(6) { background-color: gold; } } /*Flexbox Grundlayout*/ @media all { body { display: flex; } body > * { } body > :nth-child(1) { } body > :nth-child(2) { } body > :nth-child(3) { } body > :nth-child(4) { } body > :nth-child(5) { } body > :nth-child(6) { } } /*Spezielle Höhenangaben*/ @media all { body { min-height: 100vh; } body > * { } body > :nth-child(1) { } body > :nth-child(2) { } body > :nth-child(3) { } body > :nth-child(4) { } body > :nth-child(5) { } body > :nth-child(6) { } } </style> </head> <body> <div> <h2>1 blue</h2> </div> <div> <h2>2 yellow</h2> </div> <div> <h2>3 orange</h2> </div> <div> <h2>4 green</h2> </div> <div> <h2>5 gray</h2> </div> <div> <h2>6 gold</h2> </div> </body> </html> ~~~ Gruss MrMurphy