Wie entwerfe ich mit Flexbox ein responsives Taschenrechner-Tastaturlayout?

Layout der Taschenrechnertastatur mit Flexbox

Das Entwerfen eines Taschenrechners mit Flexbox kann eine Herausforderung darstellen, wenn versucht wird, Tasten unterschiedlicher Größe zu erstellen. In diesem Artikel wird gezeigt, wie Sie dieses Problem beheben können, indem Sie mit Flexbox ein reaktionsfähiges Tastaturlayout für einen Taschenrechner implementieren.

Layout

Um sowohl einfache als auch doppelte Breite zu berücksichtigen Tasten, das Layout ist in zwei Abschnitte unterteilt:

1. Haupttasten: Die Standardtasten, die eine einzelne Breite einnehmen. Diese sind in einem Flexbox-Container mit Flex-Wrap angeordnet, um je nach Bedarf mehrere Reihen zu erstellen.

2. Sondertasten: Die Tasten, die eine doppelte Breite oder Höhe erfordern, werden in eine eigene eingewickelt Flexbox-Container:

   • Schlüssel mit doppelter Breite: Der Nullschlüssel ist ein Schlüssel mit doppelter Breite und ist in einem Flex-Container enthalten, der 66,67 % des Platzes im Hauptschlüsselbereich einnimmt .
   • Taste mit doppelter Höhe: Die Gleichheitstaste ist eine Taste mit doppelter Höhe und befindet sich in einem flexiblen Container, der sich über die gesamte Höhe des Sondertastenbereichs erstreckt.

CSS-Stile

/* 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;
}

Ergebnis

Dieses Layout stellt sicher, dass alle Tasten richtig positioniert und in der richtigen Größe sind , sowohl auf Desktop- als auch auf Mobilgeräten. Die Gleichheitstaste hat eine doppelte Höhe, während die Nulltaste eine doppelte Breite hat, was die Vielseitigkeit von Flexbox bei der Erstellung reaktionsfähiger und anpassbarer Layouts demonstriert.

Das obige ist der detaillierte Inhalt vonWie entwerfe ich mit Flexbox ein responsives Taschenrechner-Tastaturlayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!