Implementierung des CSS3-Flexbox-Würfellayouts und Erläuterung von Problembeispielen

Dieser Artikel dient lediglich dazu, Sie mit der Verwendung grundlegender Attribute vertraut zu machen und die Herstellung jeder Seite eines Würfelsatzes abzuschließen. Im folgenden Inhalt werde ich einige der schwierigeren Probleme mit Flexbox nicht behandeln, wie z. B. die Syntax alter Versionen, Herstellerpräfixe, Browser-Macken usw.:

1. Erstes Gesicht
Wir wissen, dass der Würfel sechs Seiten hat und die Anzahl der Punkte auf jeder Seite den Wert dieser Seite darstellt. Die erste Seite besteht aus einem horizontal und vertikal zentrierten Punkt. Schauen wir uns die spezifische Implementierung an:

 <section name="01" class="face-01">   
  <span class="dot"></span>   
 </section>   
face-01 {   
display: flex;   
justify-content: center;   
align-items: center;

Informationen zur Verwendung von justify-content und align-items finden Sie hier unter justify-content, align-items. Mit Flexbox können Sie dies ganz einfach tun, indem Sie zwei Zeilen mit Attributen vertikal zentrieren! items-Attribut, beide Punkte sind betroffen. Flexbox bietet ein align-self-Attribut, mit dem wir die Flex-Elemente bequemer steuern können, um unterschiedliche Layouts entlang der Querachsenrichtung festzulegen. Informationen zur Verwendung von align-self finden Sie hier unter align-self.

3. Drittes Gesicht

.face-02 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-02 .dot:nth-of-type(2) {   
 align-self: flex-end;   
}   
  <section name="02" class="face-02">   
   <span class="dot"></span>   
   <span class="dot"></span>   
  </section>

Dieses Gesicht verwendet die gleichen Attribute wie das zweite Gesicht . Keine weitere Erklärung.

.face-03 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-03 .dot:nth-of-type(2) {   
 align-self: center;   
}   
.face-03 .dot:nth-of-type(3) {   
 align-self: flex-end;   
}   
<section name="03" class="face-03">   
 <span class="dot"></span>   
 <span class="dot"></span>   
 <span class="dot"></span>   
</section>

4. Vierte Fläche

In diesem Beispiel wird die Flexrichtung verwendet, Aus der wörtlichen Bedeutung geht hervor, dass es zur Steuerung der Flexrichtung verwendet wird, d

, gemäß dem vorherigen Die Layoutidee ist sehr einfach und ich werde nicht auf Details eingehen!

.face-04 {   
 display: flex;   
 justify-content: space-between;   
 flex-direction: column;   
}   
.face-04 .column {   
 display: flex;   
 justify-content: space-between;   
}   
<section name="04" class="face-04">   
  <p class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </p>   
  <p class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </p>   
</section>

Wenn ich das schreibe, sollte es einfach sein, ein kleines Würfelspiel mit JS zu schreiben.

5. Erreiche 1, 2, 3, 4, 6, 12 gleiche Teile

.row {   
  display: flex;   
  box-sizing: border-box;   
}   

.column {   
  margin: 10px;   
  flex-grow: 1;   
  flex-shrink: 1;   
  flex-basis: 0;   
  box-sizing: border-box;   
}   
<section class="row">   
  <p class="column">One</p>   
</section>   
<section class="row">   
  <p class="column">One Half</p>   
  <p class="column">One Half</p>   
</section>   
<section class="row">   
  <p class="column">One Third</p>   
  <p class="column">One Third</p>   
  <p class="column">One Third</p>   
</section>   
<section class="row">   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
</section>   
<section class="row">   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
</section>   
<section class="row">   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
</section>

In diesem Beispiel werden drei Attribute verwendet: Flex-Grow, Flex-Shrink und Flex-Basis.

1. Flex-Grow: Wird verwendet, um die Erweiterungsmöglichkeiten von Flex-Elementen nach Bedarf zu definieren. Es akzeptiert einen Wert ohne Einheiten als Verhältnis. Es wird hauptsächlich verwendet, um zu bestimmen, wie viel Platz proportional zum verbleibenden Platz des skalierbaren Containers erweitert werden soll.
Wenn „Flex-Grow“ aller Flex-Elemente auf „1“ gesetzt ist, wird für jedes Flex-Element ein gleich großer verbleibender Platz festgelegt. Wenn Sie den „flex-grow“-Wert für eines der Flex-Elemente auf „2“ setzen, ist der verbleibende Platz, der von diesem Flex-Element belegt wird, doppelt so groß wie der verbleibende Platz, der von den anderen Flex-Elementen belegt wird. Negative Werte sind ungültig.

2. Flex-Shrink: Wird verwendet, um die Fähigkeit zu definieren, Flex-Elemente nach Bedarf zu verkleinern. Auch negative Werte sind ungültig.

3. Flex-Basis: Wird verwendet, um den Skalierungsgrundwert festzulegen. Negative Werte werden nicht unterstützt. Bei der Einstellung 0 wird zusätzlicher Platz um den Inhalt herum nicht berücksichtigt. Bei der Einstellung „Auto“ wird zusätzlicher Speicherplatz basierend auf dem Flex-Grow-Wert zugewiesen.

6. 2-3-7-Layout implementieren

Berechnung der Flex-Basiswerte hier, Es sollte eine Formel geben (zu lösen). Wenn es eine solche Formel gibt, ist es sehr praktisch, ein mehrspaltiges adaptives Layout mit Vorverarbeitungssprachen wie Sass und weniger zu implementieren.

Das obige ist der detaillierte Inhalt vonImplementierung des CSS3-Flexbox-Würfellayouts und Erläuterung von Problembeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!