Implementierung und Analyse des CSS3-Flexbox-Würfellayouts

Dieser Artikel stellt hauptsächlich die Implementierung und Analyse des Flexbox-Würfellayouts in CSS3 vor. Jetzt kann ich ihn mit Ihnen teilen.

Würfellayout schlägt vor, dass auf einer Seite des Würfels bis zu 9 Punkte platziert werden können und die Anzahl der auf jeder Seite platzierten Punkte genau dem Modelldiagramm eines Layouts entspricht. Hier bringen wir die Implementierung des CSS3-Flexbox-Würfellayouts und eine Erklärung dazu Probleme:

Machen Sie sich in diesem Artikel nur mit der Verwendung grundlegender Attribute vertraut und schließen Sie die Herstellung jeder Seite eines Würfelsatzes ab. 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: 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 die Ausrichtung nicht verwenden -items-Attribut, verwenden Sie beides. 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.

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">   
  <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>

In diesem Beispiel wird Flex-Richtung verwendet. Aus der wörtlichen Bedeutung geht hervor, dass es zur Steuerung der Richtung verwendet wird Für eine detailliertere Verwendung dieses Attributs beziehen Sie sich bitte auf die fünfte und sechste Seite hinter der Flex-Richtung.

Gemäß der vorherigen Layout-Idee 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. Realisieren 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">   
  <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>  [object Object]

In diesem Beispiel werden Flex-Grow, Flex-Shrink und Flex verwendet -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">   
  <p class="column">One Half</p>   
  <p class="column">One Third</p>   
  <p class="column">One Seventh</p>   
</section>

Hier sollte es eine (zu lösende) Formel zur Berechnung der Werte der Flex-Basis geben. Mit dieser Formel ist es sehr praktisch, ein mehrspaltiges adaptives Layout mit Vorverarbeitungssprachen wie Sass und weniger zu implementieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So steuern Sie das Anzeigen und Ausblenden von DIV-Ebenen mit CSS

Symbol verwenden Schriftarten zur Unterstützung von CSS bei der Verarbeitung von Bildern

Über CSS Flex Flexibles Layout

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