|
|
|
|
<!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-Unterelemente</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="anchor30">Eigenschaften der Unterelemente</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet.
|
|
|
|
|
</p>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor31">flex-grow</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example10 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
|
|
|
|
#example10 > p { <br>   flex-grow: 1; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example10">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Mit <code>flex-grow</code> wird bestimmt, ob die Elemente in der Box auf den zur verfügung stehenden
|
|
|
|
|
Platz anwachsen sollen. 1 = ja, 0 = nein.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor32">flex-basis</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example11 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
|
|
|
|
#example11 > p { <br>   flex-basis: 100px; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example11">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
Diese Eigenschaft stellt die feste Größe der Elemente ein, sollten <code>flex-grow</code> und
|
|
|
|
|
<code>flex-shrink</code> nicht gesetzt sein.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<h3 id="anchor33">flex-shrink</h3>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example12 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
|
|
|
|
#example12 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 0; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example12">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>#example13 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
|
|
|
|
#example13 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 1; <br> }</code>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="visual-example" id="example13">
|
|
|
|
|
<p>p1</p>
|
|
|
|
|
<p>p2</p>
|
|
|
|
|
<p>p3</p>
|
|
|
|
|
<p>p4</p>
|
|
|
|
|
<p>p5</p>
|
|
|
|
|
<p>p6</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="explanation">
|
|
|
|
|
<code>flex-shrink</code> stellt ein, ob die Elemente nach möglichkeit schrumpfen sollen, um den
|
|
|
|
|
Rahmen der Flexbox nicht zu überschreiten. 1 = ja, 0 = nein.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>Erstellt von: Niklas Minkowitsch</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
