|
|
|
|
<!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-Eigenschaften</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/allgemeines.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="anchor20">Eigenschaften</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können.
|
|
|
|
|
</p>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor21">flex-wrap</h3>
|
|
|
|
|
<h4>Mit horizontaler Anordnung</h4>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example3 { <br>   display: flex; <br>   flex-direction: row; <br>   flex-wrap:
|
|
|
|
|
wrap; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example3">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
</div>
|
|
|
|
|
<h4>Mit vertikaler Anordnung</h4>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example4 { <br>   display: flex; <br>   flex-direction: column; <br>   flex-wrap:
|
|
|
|
|
wrap; <br>   max-height: 600px; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example4">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Die Eigenschaft <code>flex-wrap</code> bestimmt, ob Elemente die über den Platz in der Hauptrichtung
|
|
|
|
|
hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen.
|
|
|
|
|
Der Standard-Wert ist <code>nowrap</code>, <code>wrap</code> aktiviert das Wrapping.
|
|
|
|
|
</p>
|
|
|
|
|
<h3 id="anchor22">flex-flow</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example4 { <br>   display: flex; <br>   flex-flow: column wrap; <br>   max-height:
|
|
|
|
|
600px; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
|
|
|
|
|
<code>flex-wrap</code> in einer Zeile zusammenfasst.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor23">justify-content</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example5 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
|
|
|
|
justify-content: center; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example5">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example6 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
|
|
|
|
justify-content: flex-end; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example6">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Über <code>justify-content</code> lässt sich die Ausrichtung der Elemente entlang der Hauptachse der
|
|
|
|
|
Flexbox einstellen. <br> <br>
|
|
|
|
|
Diese Werte können gesetzt werden: <br>
|
|
|
|
|
<code>
|
|
|
|
|
  - flex-start <br>
|
|
|
|
|
  - flex-end <br>
|
|
|
|
|
  - center <br>
|
|
|
|
|
  - space-around <br>
|
|
|
|
|
  - space-between <br>
|
|
|
|
|
  - space-evenly <br>
|
|
|
|
|
</code>
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor24">align-content</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example7 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
|
|
|
|
justify-content: flex-end; <br>   align-content: space-between; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example7">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
<code>align-content</code> funktioniert wie <code>justify-content</code>, bestimmt allerdings die
|
|
|
|
|
nicht-Hauptachse (z.B. wenn Wrapping stattfindet). <br> <br>
|
|
|
|
|
Diese Werte können gesetzt werden: <br>
|
|
|
|
|
<code>
|
|
|
|
|
  - stretch <br>
|
|
|
|
|
  - center <br>
|
|
|
|
|
  - flex-start <br>
|
|
|
|
|
  - flex-end <br>
|
|
|
|
|
  - space-around <br>
|
|
|
|
|
  - space-between <br>
|
|
|
|
|
  - space-evenly <br>
|
|
|
|
|
</code>
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor25">overflow</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example8 { <br>   display: flex; <br>   flex-flow: row nowrap; <br>   overflow-x:
|
|
|
|
|
scroll; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example8">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
<p>p9</p>
|
|
|
|
|
<p>p10</p>
|
|
|
|
|
<p>p11</p>
|
|
|
|
|
<p>p12</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example9 { <br>   display: flex; <br>   flex-flow: column nowrap; <br>  
|
|
|
|
|
max-height: 600px; <br>   overflow-y: scroll; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example9">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
<p>p7</p>
|
|
|
|
|
<p>p8</p>
|
|
|
|
|
<p>p9</p>
|
|
|
|
|
<p>p10</p>
|
|
|
|
|
<p>p11</p>
|
|
|
|
|
<p>p12</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Die overflow-Eigenschaft beschreibt, was passiert wenn Elemente den Rahmen der Flexbox
|
|
|
|
|
überschreiten. <code>visible</code> ist die Standard-option, <code>scroll</code>
|
|
|
|
|
erzeugt eine Scroll-leiste und <code>hidden</code> versteckt Elemente die nicht mehr in die Box
|
|
|
|
|
passen.
|
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>Erstellt von: Niklas Minkowitsch</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
