Quelle: https://internetingishard.com/html-and-css/flexbox/

# Ohne Flexbox

    .container {
        width: 600px;
        height-min: 120px;
        border: 1px yellow solid;
        background-color: lightgoldenrodyellow;

    }

    .box {
        width:50px;
        height:50px;
        color:red;
        font-size:36px;
        background-color:lightskyblue;
        border: 1pt solid black;
    }

1
2
3
4
5
6

# display: flex

    .container {
        display:flex;

    }

    .box {
        display:flex;
    }

1
2
3
4
5
6

# Horizontale Ausrichtung: justify-content

center flex-start flex-end space-around space-between

### center

    .container {
        display:flex;
        justify-content: center;
    }

1
2
3
4
5
6

### flex-start

1
2
3
4
5
6

### flex-end

1
2
3
4
5
6

### space-around

1
2
3
4
5
6

### space-between

1
2
3
4
5
6

# Vertikale Ausrichtung: align-items

center flex-start (top) flex-end (bottom) stretch baseline

    .container {
        display:flex;
        align-items: center;
    }

### center

1
2
3
4
5
6

### flex-start

1
2
3
4
5
6

### flex-end

1
2
3
4
5
6

### stretch

    .box {
        display:flex;
        width:50px;
        /*height:50px; */
        align-items: stretch;
    }

1
2
3
4
5
6

# Wrapping

    .container {
        /* height:600px; */
        height:200px;
    }

### Elemente werden automatisch verkleinert

1
2
3
4
5
6

### min-width, min-height

    .box {
      min-width:50px;
      min-height:50px;
    }

1
2
3
4
5
6

### flex-wrap: wrap

nowrap wrap

    .container {
       flex-wrap: wrap;
    }

1
2
3
4
5
6

# Zeilen/Spalten: flex-direction

row column

    .container {
        flex-direction: column;
    }

1
2
3
4
5
6

# Elemente anders als der Container: align-self

### align-self

center flex-start (top) flex-end (bottom) stretch baseline

    <div class="box" style="align-self:flex-start">1</div>

1
2
3
4
5
6

# Relative Größe der Items festlegen: flex

zahl, initial (ursprüngliche Größe)

### Gleiche Größe für alle

    .box {flex: 1}

1
2
3
4
5
6

### Ungleiche Größen

    <div class="box" style="flex:2">1</div>
    <div class="box" style="flex:1">2</div>
    <div class="box" style="flex:initial">3</div>
    <div class="box" style="flex:1">4</div>
    <div class="box" style="flex:1">5</div>
    <div class="box" style="flex:1">6</div>

1
2
3
4
5
6

### auto margin

Aufteilen von items

    <div class="box" style="margin-left:auto">3</div>

1
2
3
4
5
6

# Verschachteln von Flexboxen

    .container{
        flex-direction:column;
    }

    .container2 {
      display: flex;
      flex-direction:row;
    }

    <div class="container">
        <div class="container2">
                <div class="box">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
        </div>
        <div class="container2">
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
        </div>
    </div>

1
2
3
4
5
6