<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-layout</title>
<link rel="stylesheet" href="flex-layout.css" />
</head>
<body>
<h1>Flex Layout Demonstration
<span id="subscription">Inspiration:
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>
</span>
</h1>
<div id="main">
<div id="container">
<h2>Properties for the container</h2>
<div id="display" class="container-item">
<h3><a href="#display">display</a>: flex | inline-flex</h3>
<pre class="attribute-demo-code"><code>#container {
display: flex;
} </code></pre>
<div class="container-demo">TODO: Demo for display: flex</div>
<pre class="attribute-demo-code"><code>#container {
display: inline-flex;
} </code></pre>
<div class="container-demo">TODO: Demo for display: inline-flex</div>
</div>
<div id="flex-direction" class="container-item">
<h3><a href="#flex-direction">flex-direction</a>: column | row | column-reverse | row-reverse</h3>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-direction: row;
} </code></pre>
<div id="flex-direction-row-parent" class="container-demo">
<div class="flex-direction-row-child item-demo">item 1</div>
<div class="flex-direction-row-child item-demo">item 2</div>
<div class="flex-direction-row-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-direction: column;
} </code></pre>
<div id="flex-direction-column-parent" class="container-demo">
<div class="flex-direction-column-child item-demo">item 1</div>
<div class="flex-direction-column-child item-demo">item 2</div>
<div class="flex-direction-column-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-direction: row-reverse;
} </code></pre>
<div id="flex-direction-row-revert-parent" class="container-demo">
<div class="flex-direction-row-revert-child item-demo">item 1</div>
<div class="flex-direction-row-revert-child item-demo">item 2</div>
<div class="flex-direction-row-revert-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-direction: column-reverse;
} </code></pre>
<div id="flex-direction-column-reverse-parent" class="container-demo">
<div class="flex-direction-column-revert-child item-demo">item 1</div>
<div class="flex-direction-column-revert-child item-demo">item 2</div>
<div class="flex-direction-column-revert-child item-demo">item 3</div>
</div>
</div>
<div id="flex-wrap" class="container-item">
<h3><a href="#flex-wrap">flex-wrap</a></h3>
<p><code>nowrap | wrap | wrap-reverse</code></p>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-wrap: nowrap;
} </code></pre>
<div id="flex-wrap-no-wrap-parent" class="container-demo">
<div class="flex-wrap-no-wrap-child item-demo">long item 1</div>
<div class="flex-wrap-no-wrap-child item-demo">long item 2</div>
<div class="flex-wrap-no-wrap-child item-demo">very long item 3</div>
<div class="flex-wrap-no-wrap-child item-demo">very long long long item 4</div>
<div class="flex-wrap-no-wrap-child item-demo">as long as possible item 5</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-wrap: wrap;
} </code></pre>
<div id="flex-wrap-wrap-parent" class="container-demo">
<div class="flex-wrap-wrap-child item-demo">long item 1</div>
<div class="flex-wrap-wrap-child item-demo">long item 2</div>
<div class="flex-wrap-wrap-child item-demo">very long item 3</div>
<div class="flex-wrap-wrap-child item-demo">very long long long item 4</div>
<div class="flex-wrap-wrap-child item-demo">as long as possible item 5</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-wrap: wrap-reverse;
} </code></pre>
<div id="flex-wrap-wrap-reverse-parent" class="container-demo">
<div class="flex-wrap-wrap-reverse-child item-demo">long item 1</div>
<div class="flex-wrap-wrap-reverse-child item-demo">long item 2</div>
<div class="flex-wrap-wrap-reverse-child item-demo">very long item 3</div>
<div class="flex-wrap-wrap-reverse-child item-demo">very long long long item 4</div>
<div class="flex-wrap-wrap-reverse-child item-demo">as long as possible item 5</div>
</div>
</div>
<div id="flex-flow" class="container-item">
<h3><a href="#flex-flow">flex-flow</a></h3>
<p><code>{column | row | column-reverse | row-reverse} x {nowrap | wrap | wrap-reverse}</code></p>
<code>flex-flow</code> ist eine Abkürzung für <code>flex-direction</code> und <code>flex-wrap</code>
<pre class="attribute-demo-code"><code>{
display: flex;
flex-flow: column wrap;
} </code></pre>
<div id="flex-flow-column-wrap-parent" class="container-demo">
<div class="flex-flow-column-wrap-child item-demo">long item 1</div>
<div class="flex-flow-column-wrap-child item-demo">long item 2</div>
<div class="flex-flow-column-wrap-child item-demo">very long item 3</div>
<div class="flex-flow-column-wrap-child item-demo">very long long long item 4</div>
<div class="flex-flow-column-wrap-child item-demo">as long as possible item 5</div>
</div>
</div>
<div id="justify-content" class="container-item">
<h3><a href="#justify-content">justify-content</a></h3>
<p><code class="attribute-value">flex-start | flex-end | center | space-between | space-around | space-evenly</code></p>
<pre class="attribute-demo-code"><code>{
display: flex;
justify-content: flex-start;
} </code></pre>
<div id="justify-content-flex-start-parent" class="container-demo">
<div class="justify-content-flex-start-child item-demo">item 1</div>
<div class="justify-content-flex-start-child item-demo">item 2</div>
<div class="justify-content-flex-start-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
justify-content: flex-end;
} </code></pre>
<div id="justify-content-flex-end-parent" class="container-demo">
<div class="justify-content-flex-end-child item-demo">item 1</div>
<div class="justify-content-flex-end-child item-demo">item 2</div>
<div class="justify-content-flex-end-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
justify-content: center;
} </code></pre>
<div id="justify-content-center-parent" class="container-demo">
<div class="justify-content-center-child item-demo">item 1</div>
<div class="justify-content-center-child item-demo">item 2</div>
<div class="justify-content-center-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
justify-content: space-between;
} </code></pre>
<div id="justify-content-space-between-parent" class="container-demo">
<div class="justify-content-space-between-child item-demo">item 1</div>
<div class="justify-content-space-between-child item-demo">item 2</div>
<div class="justify-content-space-between-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
justify-content: space-around;
} </code></pre>
<div id="justify-content-space-around-parent" class="container-demo">
<div class="justify-content-space-around-child item-demo">item 1</div>
<div class="justify-content-space-around-child item-demo">item 2</div>
<div class="justify-content-space-around-child item-demo">item 3</div>
</div>
<pre class="attribute-demo-code"><code>{
display: flex;
justify-content: space-evenly;
} </code></pre>
<div id="justify-content-space-evenly-parent" class="container-demo">
<div class="justify-content-space-evenly-child item-demo">item 1</div>
<div class="justify-content-space-evenly-child item-demo">item 2</div>
<div class="justify-content-space-evenly-child item-demo">item 3</div>
</div>
<p>Weitere Werten: <code>start | end | left | right</code></p>
</div>
<div id="align-items" class="container-item">
<h3>align-item</h3>
<p><code class="attribute-value">flex-start | flex-end | center | stretch | baseline</code></p>
</div>
<div id="align-content" class="container-item">
<h3>align-content</h3>
<p><code class="attribute-value">flex-start | flex-end | center | stretch | space-between | space-around</code></p>
</div>
<div id="gap" class="container-item">
<h3>gap, row-gap, column-gap</h3>
</div>
</div>
<!-- -->
<div id="item">
<h2>Properties for the items</h2>
<div id="order" class="item-item">
<h3>order</h3>
</div>
<div id="flex-grow" class="item-item">
<h3>flex-grow</h3>
</div>
<div id="flex-shrink" class="item-item">
<h3>flex-shrink</h3>
</div>
<div id="flex-basis" class="item-item">
<h3>flex-basis</h3>
</div>
<div id="align-self" class="item-item">
<h3>align-self</h3>
</div>
</div>
</div>
</body>
</html>