Mehrere Methoden zur horizontalen und vertikalen Zentrierung von Div-Inhalten mit CSS3 Flex

/*1. Richtung*/
        /*Standardrichtung (positive Zeilenrichtung)*/
        /* Flex-Richtung: Zeile; */
        /*Zeilenrichtung umkehren*/
        /* Flex-Richtung: Zeile umkehren; */
        /*Spalte positive Richtung*/
        /*Flex-Richtung: Spalte;*/
        /*Spaltenrichtung umkehren*/
        /*Flex-Richtung: Spalte umkehren;*/

        /*2. Zeilenumbruch*/
        /*flex-wrap: umwickeln;*/
        /*flex-wrap: umkehren;*/

        /*3.Richtung+Wrep-Kombination*/
        /*Flex-Flow: Zeilenumbruch-Rückwärts;*/

        /*4. Ausrichtung der Hauptachse*/
        /*Startpunkt linksbündig*/
        /*Inhalt ausrichten: Flex-Start;*/
        /*Startpunkt rechtsbündig*/
        /*Inhalt ausrichten: Flex-Ende;*/
        /*Startpunkt ist auf die Mitte ausgerichtet*/
        /*Inhalt ausrichten: zentriert;*/
        /*Nach links und rechts ausgebreitete Intervalle*/
        /*Inhalt ausrichten: Abstand zwischen;*/
        /*Gleiche Innenränder*/
        /*Inhalt ausrichten: Leerzeichen drumherum;*/
        /*Gleiche Intervalle*/
        /*Inhalt ausrichten: gleichmäßiger Abstand;*/
        
        /*5. Achsenübergreifende Ausrichtung: bei Flex-Direction: Zeile; ändert die Y-Achse, bei Flex-Direction: Spalte; ändert die X-Achse*/
        /*Standardmäßige Ausrichtung quer zur Achse*/
        /*Elemente ausrichten: strecken;*/
        /*Die Standardquerachse ist zentriert*/
        /*Elemente ausrichten: zentrieren;*/
        /*Standardmäßige Ausrichtung quer zur Achse*/
        /*Elemente ausrichten: Flex-Start;*/
        /*Standardmäßige Ausrichtung quer zur Achse*/
        /*Elemente ausrichten: Flex-Ende;*/
        /*Standardmäßige achsenübergreifende Inhaltsausrichtung*/
        /*Elemente ausrichten: Grundlinie;*/

        /*6. Mehrzeilige achsenübergreifende Ausrichtung*/
        /*Inhalt ausrichten: strecken;*/
        /*Zentrierte Ausrichtung mehrerer Linien der Querachse*/
        /*Inhalt ausrichten: zentriert;*/
        /*Mehrere Linien auf der Querachse ausgerichtet*/
        /*Inhalt ausrichten: Flex-Start;*/
        /*Mehrere Zeilen kreuzen die Achsenausrichtung*/
        /*Inhalt ausrichten: Flex-Ende;*/
        /*Mehrere Zeilen haben gleiche Innenränder*/
        /*Inhalt ausrichten: Leerzeichen herum;*/
        /*Mehrere Linien der Querachse sind nach links und rechts verstreut*/
        /*Inhalt ausrichten: Leerzeichen zwischen;*/
        /*Mehrere Linien haben den gleichen Abstand zwischen den Querachsen*/
        /*Inhalt ausrichten: gleichmäßiger Abstand;*/

/*1. Kontrollieren Sie die Reihenfolge der Elemente*/
        /*Bestellung: 2;*/
        /*2. Erweitern Sie den Raum proportional. Je größer die Zahl, desto größer der Raum. Der Wert 0 erweitert nicht*/
        /*flex-wachsen: 2;*/
        /*3. Reduzieren Sie den Platz proportional. Je größer die Zahl, desto kleiner der Platz. Der Wert 0 wird nicht komprimiert*/
        /*flex-shrink: 2;*/
        /*4. Muss mit Flex-Richtung verwendet werden, Zeile=Breite, Spalte=Höhe, und die Priorität ist höher als Breite/Höhe, der automatische Wert geht vor der Priorität*/
        /*Flex-Basis: 600px;*/
        /*5.flex=wachsen+schrumpfen+basis*/
        /*wachsen = 1 und verkleinern = 1 und Basis = auto*/
        /*flex: auto;*/
        /*wachsen = 0 && verkleinern = 1 && basis = auto*/
        /*flex: initial;*/
         /*wachsen = 0 && verkleinern = 0 && basis = auto*/
        /*flex: keine;*/
        /*6.align-self überschreibt die Align-Items des Containers*/
        /*selbst ausrichten: Flex-Start;*/