Comment puis-je personnaliser la disposition du clavier de la calculatrice avec flexbox ?

Disposition du clavier de la calculatrice avec Flexbox

Lors de la conception d'une calculatrice à l'aide de Flexbox, il est possible de personnaliser la taille et l'apparence des touches individuelles. Par exemple, vous pouvez augmenter la hauteur d'une touche et doubler la largeur d'une autre.

Pour créer cette disposition personnalisée, commencez par envelopper les touches de tailles inégales dans leurs propres conteneurs Flex. Cela vous permet de gérer ces clés séparément.

1. Emballez les clés inégales dans des conteneurs flexibles :

#anomaly-keys-wrapper {
  display: flex;
  width: 100%;
}

#anomaly-keys-wrapper > section:first-child {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
}

#anomaly-keys-wrapper > section:last-child {
  width: 25%;
  display: flex;
  flex-direction: column;
}

2. Ajuster Dimensions des clés :

#anomaly-keys-wrapper > section:first-child > div {
  flex: 1 0 33.33%;
}

#anomaly-keys-wrapper > section:first-child > div:nth-child(4) {
  flex-basis: 66.67%;
}

#anomaly-keys-wrapper .tall {
  width: 100%;
  flex: 1;
}

Avec cette approche, vous pouvez contrôler la taille et la disposition de touches spécifiques sans affecter la structure globale du clavier de la calculatrice.

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!