Comment concevoir une disposition de clavier de calculatrice réactive avec Flexbox ?

Disposition du clavier d'une calculatrice avec Flexbox

La conception d'une calculatrice avec Flexbox peut présenter des défis lorsque l'on tente de créer des clés de différentes tailles. Cet article montrera comment résoudre ce problème en implémentant une disposition de clavier réactive pour une calculatrice utilisant Flexbox.

Mise en page

Pour s'adapter à la fois à la simple largeur et à la double largeur touches, la disposition est divisée en deux sections :

1. Touches principales : Les touches standard qui occupent une seule largeur. Celles-ci sont disposées dans un conteneur flexbox avec flex-wrap pour créer plusieurs rangées selon les besoins.

2. Clés spéciales : Les touches qui nécessitent une double largeur ou hauteur sont enveloppées dans leur propre Conteneurs flexbox :

   • Clé double largeur : La clé zéro est une clé double largeur et est contenu dans un conteneur flexible qui couvre 66,67 % de l'espace dans la section des clés principales.
   • Clé double hauteur : La clé égale est une clé à double hauteur et est contenue dans un flex conteneur qui s'étend sur toute la hauteur de la section des touches spéciales.

CSS Styles

/* 1. Normalize styles */
* { box-sizing: border-box; }

/* 2. Flexbox container for the anomaly keys */
#anomaly-keys-wrapper {
  display: flex;
  width: 100%;
}

/* 3. First section of the anomaly keys (main keys) */
#anomaly-keys-wrapper > section:first-child {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
}

/* 4. Individual keys within the main keys section */
#anomaly-keys-wrapper > section:first-child > div {
  flex: 1 0 33.33%;
}

/* 5. Double-width key within the main keys section */
#anomaly-keys-wrapper > section:first-child > div:nth-child(4) {
  flex-basis: 66.67%;
}

/* 6. Second section of the anomaly keys (special keys) */
#anomaly-keys-wrapper > section:last-child {
  width: 25%;
  display: flex;
  flex-direction: column;
}

/* 7. Double-height key within the special keys section */
#anomaly-keys-wrapper .tall {
  width: 100%;
  flex: 1;
}

Résultat

Cette disposition garantit que toutes les touches sont correctement positionnées et dimensionnées, à la fois sur les appareils de bureau et mobiles. La touche égale a une double hauteur, tandis que la touche zéro a une double largeur, démontrant la polyvalence de Flexbox dans la création de mises en page réactives et personnalisables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!