Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout

Dieser Artikel stellt das Flex-Layout vor, um eine feste Anzahl von Zeilen pro Zeile + adaptives Layout zu erreichen, und teilt es mit Ihnen. Die Details sind wie folgt:

Effektanzeige

Analyse

 <div Klasse="Vorlage" v-for="(Element,Vorlagenindex) in 7">
              <div @click="useTemplate()" v-touch:long="(e)=>touchin(groupIndex,templateIndex)">
                <img class="icon" src="../../../assets/home-page/templateIcon.png" alt />
                <div class="templateName">Vorlagenname</div>
              </div>
            </div>

// Übergeordnetes Feld, eingestellt auf:
.templateItem {
  Breite: 100 %;
 
  Textausrichtung: zentriert;
  Anzeige: Flex;
  Inhalt ausrichten: Flex-Start;
  Flex-Flow: Zeilenumbruch;
}

//Subbox, eingestellt auf:
 .Vorlage {
  Flexion: 0,0 0,25 %;
  Rand unten: 20px;
}

Einstellungen für die übergeordnete Box:

Die Anordnungsmethode für Unterfelder ist Flex-Start. Die Unterfelder werden vom Startpunkt aus platziert und Zeilenumbrüche werden durch Flex-Flow festgelegt. Wenn keine Zeilenumbrüche festgelegt sind, wird die Größe der Unterelemente verringert, um den Effekt zu erzielen, als wären sie in einer Zeile platziert.

Subbox-Einstellungen:

Verwenden Sie flex:0 0 25%, um die Platzierung der untergeordneten Box festzulegen. Die Flex-Eigenschaft ist eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Die Standardwerte sind 0, 1 und Auto. Geben Sie die Anzahl der Anteile des Unterpostens an

Erklärung zur Demontage: flex:0 0 25 % entspricht flex-grow=0 (standardmäßig keine Vergrößerung) + flex-shrink=0 (keine Verkleinerung) + flex-basis=25 % (das Projekt nimmt den Hauptachsenraum ein)

Für ein erstes Verständnis des Flex-Layouts können Sie unseren Blog lesen: Erstes Verständnis des Flex-Layouts

Dies ist das Ende dieses Artikels über die Verwendung von Flex-Layout zum Erreichen einer festen Zeilenanzahl + adaptivem Layout. Weitere Informationen zur Verwendung von Flex-Layout zum Erreichen einer festen Zeilenanzahl + adaptivem Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!