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