<!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>
|
