You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

84 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox-Allgemein</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/flexbox.css">
</head>
<body>
<header>
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav>
<main>
<article>
<h2 id="anchor10">Allgemeines</h2>
<p>
Die Flexbox ist eine Styling-Option, mit der das Layout der Seite angepasst wird. Die Flexbox ordnet
alle Unterelemente eines Bereichs in einer Reihe an.
</p>
<section>
<h3 id="anchor11">Eine Flexbox erzeugen</h3>
<div class="code-example">
<code>
#example1 { <br> &emsp; display: flex; <br> }
</code>
</div>
<div class="visual-example" id="example1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<p class="explanation">
Dieser Code erstellt eine Flexbox für das Div-Element mit der ID example1. Die p-Elemente innerhalb
des Divs werden in einer Reihe angezeigt.
</p>
</section>
<section>
<h3 id="anchor12">flex-direction</h3>
<div class="code-example">
<code>
#example2 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> }
</code>
</div>
<div class="visual-example" id="example2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<p class="explanation">
Die flex-direction gibt an, in welche Richtung die Elemente in der Flexbox angeordnet werden.
<code>column</code> ordnet Elemente untereinander an, <code>row</code> nebeneinander.
<code>column-reverse</code> und <code>row-reverse</code>
bewirken das gleiche mit umgekehrter reihenfolge der Elemente.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Niklas Minkowitsch</p>
</footer>
</body>
</html>