Implementierung des Flexbox-Würfellayouts in CSS3 und Erläuterung der Probleme

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. Wir wissen, dass die Würfel haben sechs Seiten, die Anzahl der Punkte in jeder Seite stellt den Wert der Seite dar und 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 tun, indem Sie zwei Zeilen mit Attributen vertikal zentrieren!

2. Zweites 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>

Hier können wir das Attribut align-items nicht verwenden 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-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>

Dieses Gesicht verwendet die gleichen Attribute wie das zweite Gesicht und wird nicht noch einmal erklärt.

4. Vierte Fläche

.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">   
  <div class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </div>   
  <div class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </div>   
</section>

In diesem Beispiel wird die Flex-Richtung verwendet, um die zu steuern Richtung der Flexion, d. h. Layout nach Spalten oder Zeilen. Weitere Informationen zur Verwendung dieses Attributs finden Sie in der fünften und sechsten Seite hinter der Flexrichtung

Nach den vorherigen Layoutideen ist es sehr einfach und ich werde nicht ins Detail gehen!

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

5. Implementieren Sie 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">   
  <div class="column">One</div>   
</section>   
<section class="row">   
  <div class="column">One Half</div>   
  <div class="column">One Half</div>   
</section>   
<section class="row">   
  <div class="column">One Third</div>   
  <div class="column">One Third</div>   
  <div class="column">One Third</div>   
</section>   
<section class="row">   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
</section>   
<section class="row">   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
</section>   
<section class="row">   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
</section>

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

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. Implementieren Sie das 2-3-7-Layout

.row237 .column:first-of-type {   
  flex-grow: 2;   
  flex-basis: 5px;   
}   
.row237 .column:nth-of-type(2) {   
  flex-grow: 3;   
  flex-basis: 18px;   
}   
.row237 .column:nth-of-type(3) {   
  flex-grow: 7;   
  flex-basis: 70.5px;   
}   
  
<section class="row row237">   
  <div class="column">One Half</div>   
  <div class="column">One Third</div>   
  <div class="column">One Seventh</div>   
</section>

Hier sollte eine (zu lösende) Formel für die Berechnung der Flex-Basiswerte vorhanden sein ist eine solche FormelEs wird sehr praktisch sein, ein mehrspaltiges adaptives Layout mit Vorverarbeitungssprachen wie Sass und weniger zu implementieren.

Weitere Artikel zur Implementierung und Problemerklärung des CSS3-Flexbox-Würfellayouts finden Sie auf der chinesischen PHP-Website!