Bearbeiten von „Siehe CSS - Flexbox“

== Links ==
https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
 https://www.w3schools.com/css/css3_flexbox.asp

== Einleitung ==
Before the Flexbox Layout module, there were four layout modes:

<pre>
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
</pre>
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
== Properties ==
<pre>
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
</pre>

The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.
 column
 row
 column-reverse
 row-reverse

The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.
 wrap
 nowrap
 wrap-reverse

The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.
 row wrap
 ...

The '''justify-content''' property is used to '''align''' the flex items:
 center
 flex-start
 flex-end
 space-around
 space-between

The '''align-items''' property is used to '''align''' the flex items '''vertically'''
 center
 flex-start
 flex-end
 stretch
 baseline

The '''align-content''' property is used to '''align the flex lines'''.
 space-between
 space-around
 stretch
 center
 flex-start
 flex-end

'''Child Elements (Items)'''

The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.

The '''order property''' specifies the order of the flex items.
<pre>
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
</pre>

The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.

Make the third flex item grow eight times faster than the other flex items:
<pre>
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>
</pre>

The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.
Do not let the third flex item shrink as much as the other flex items:
<pre>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
</pre>

The '''flex-basis''' property specifies the '''initial length''' of a flex item.
 <div style="flex-basis: 200px">3</div>

The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties
 <div style="flex: 0 0 200px">3</div>

The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.

The align-self property overrides the default alignment set by the container's align-items property.

== Beispiele ==
Fotogrid
<syntaxhighlight lang="CSS">
<!DOCTYPE html>
<html>
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/falls2.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
    <img src="/w3images/nature.jpg" style="width:100%">
    <img src="/w3images/mist.jpg" style="width:100%">
    <img src="/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="/w3images/underwater.jpg" style="width:100%">
    <img src="/w3images/ocean.jpg" style="width:100%">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/mountainskies.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
    <img src="/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>
</syntaxhighlight>