Erläuterung der Schritte für Flex-Layout in CSS (mit Code)

Der Inhalt dieses Artikels besteht darin, die Schritte des flexiblen Layouts in CSS (mit Code) zu erklären. Ich hoffe, dass er für Freunde hilfreich ist.

html:

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .wrap{
                width: 300px;
                height: 300px;
                display: flex;
                flex-direction: row; /*默认主轴方向水平向右*/
                flex-direction: row-reverse;  /*可选主轴方向水平向左*/ 
                /* flex-direction: column; */  /*可选主轴方向垂直向下*/
                /* flex-direction: column-reverse; */ /*可选主轴方向垂直向上*/
                
                flex-wrap: wrap;  /*默认侧轴方向与主轴垂直方向向下或者右*/
                /* flex-wrap: wrap-reverse; */ /*可选侧轴方向与主轴垂直方向向上或者左*/
            }
            .wrap div{
                background: skyblue;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                border: bisque 1px solid;
            }
        </style>
    
    
        <div>
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    

Schritt 1: Stellen Sie zunächst display: flex; für den übergeordneten Container ein, was bedeutet, dass das flexible elastische Layout verwendet wird

Schritt 2: Legen Sie die Hauptachsenrichtung fest
①flex -direction: row; (Standardparameter) Die Hauptachsenrichtung ist horizontal nach rechts. Das Ergebnis ist wie folgt:

②flex-direction: row-reverse; (optionaler Parameter) Die Hauptachsenrichtung ist horizontal nach links, das Ergebnis ist wie in der Abbildung gezeigt:

③Flex-Richtung: Spalte; (optionaler Parameter) Die Hauptachsenrichtung ist vertikal nach unten. Das Ergebnis wird durch Ihre eigene Vorstellung zusammengestellt (hauptsächlich, weil es zu lang ist/lacht)

④Flex-Richtung: Spalte- reverse; (optionaler Parameter) Die Hauptachsenrichtung ist vertikal nach oben, das gleiche gilt

Schritt 3: Legen Sie die Querachsenrichtung fest

①Flex-Wrap: Wrap; die Standard-Seitenachse Die Richtung ist nach unten oder rechts senkrecht zur Hauptachse. Das Ergebnis ist wie in der Abbildung dargestellt:

②flex-wrap: die optionale Richtung der Seitenachse ist nach oben oder links senkrecht zur Hauptachse. Das Ergebnis ist eine Rätselaufgabe

Hinweis: Die Richtung der Seitenachse ändert sich mit der Hauptachse und die Hauptachse ist immer relativ zur Seitenachse . Vertikal, die Richtungen der beiden Achsen sind standardmäßig nach rechts und nach unten gerichtet diese beiden Die Abkürzung des Attributs: Wenn zwei Parameter vorhanden sind, handelt es sich um die Hauptachsenrichtung + die Seitenachsenrichtung. Wenn es sich um einen einzelnen Parameter handelt, handelt es sich um die Hauptachsenrichtung.

order:number skalierbares Element, zum Beispiel eine Bestellung hinzufügen: 1 zu einem Untercontainer. Die Standardreihenfolge aller Untercontainer ist 0. Wenn wir die Reihenfolge des ersten Containers auf festlegen 1, etwas Ähnliches wie Sortiereffekt

justify-content:flex-start(default)||flex-end||center||space- between||space -around skalierbarer Container

Das obige ist der detaillierte Inhalt vonErläuterung der Schritte für Flex-Layout in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!