Implémentation de la disposition des dés Flexbox en CSS3 et explication des problèmes

Cet article a simplement pour but de vous familiariser avec l'utilisation des attributs de base et de compléter la production de chaque face d'un jeu de dés. Dans le contenu suivant, je ne couvrirai pas certains des problèmes les plus difficiles liés à flexbox, tels que la syntaxe de l'ancienne version, les préfixes des fournisseurs, les bizarreries du navigateur, etc. :

1. Le dé a six faces, le nombre de points sur chaque face représente la valeur de la face, et la première face est constituée d'un point centré horizontalement et verticalement. Jetons un coup d'œil à l'implémentation spécifique :

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

Pour l'utilisation de justifier-contenu et align-items, veuillez vous référer ici à justifier-contenu, align-items. En utilisant flexbox, vous pouvez le faire en centrant verticalement deux lignes d'attributs !

2. Second Face

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

Ici, nous ne pouvons pas utiliser l'attribut align-items. , les deux points seront affectés. Impact, flexbox fournit un attribut align-self, qui nous permet de contrôler plus facilement les éléments flexibles pour définir différentes dispositions le long de la direction des axes transversaux. Pour l'utilisation d'align-self, veuillez vous référer à align-self ici.

3. Troisième visage

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

Ce visage utilise les mêmes attributs que le deuxième visage et ne sera plus expliqué.

4. Quatrième Face

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

Dans cet exemple, flex-direction est utilisé Au sens littéral, on peut voir qu'il est utilisé pour contrôler. la direction de flex, c'est-à-dire la disposition par colonnes ou lignes. Pour une utilisation plus détaillée de cet attribut, veuillez vous référer à la cinquième face et à la sixième face derrière flex-direction

Selon les idées de disposition précédentes, c'est le cas. très facile et je n'entrerai pas dans les détails !

En écrivant ceci, il devrait être facile d'écrire un petit jeu de dés avec JS.

5. Implémentez 1, 2, 3, 4, 6, 12 parties égales

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

Dans cet exemple, flex-grow et flex-shrink sont utilisés , base flexible sur trois attributs.

1. flex-grow : utilisé pour définir les capacités d'expansion des éléments flexibles selon les besoins. Il accepte une valeur sans unités comme rapport. Il est principalement utilisé pour déterminer la quantité d'espace à étendre proportionnellement à l'espace restant du conteneur évolutif.
Si "flex-grow" de tous les éléments flexibles est défini sur "1", alors chaque élément flexible sera défini sur un espace restant de taille égale. Si vous définissez la valeur "flex-grow" sur "2" pour l'un des éléments flexibles, alors l'espace restant occupé par cet élément flexible est le double de l'espace restant occupé par les autres éléments flexibles. Les valeurs négatives ne sont pas valides.
2. flex-shrink : utilisé pour définir la possibilité de réduire les éléments flexibles selon les besoins. Les valeurs négatives sont également invalides.
3. flex-basis : utilisé pour définir la valeur de base de mise à l'échelle. L'espace restant sera mis à l'échelle en fonction du rapport. Les valeurs négatives ne sont pas prises en charge. S'il est défini sur 0, l'espace supplémentaire autour du contenu n'est pas pris en compte. S'il est défini sur auto, un espace supplémentaire est alloué en fonction de la valeur flex-grow.

6. Implémentez la disposition 2-3-7

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

Il devrait y avoir une formule (à résoudre) pour calculer les valeurs de base flexible ici, s'il y en a. une formule, Il sera très pratique d'implémenter une mise en page adaptative multi-colonnes avec des langages de pré-traitement tels que sass et moins.

Pour plus d'articles liés à l'implémentation et à l'explication des problèmes de la disposition des dés CSS3 Flexbox, veuillez faire attention au site Web PHP chinois !