Flexbox を使用して応答性の高い電卓のキーパッド レイアウトを設計するにはどうすればよいですか?

Flexbox を使用した電卓のキーパッド レイアウト

Flexbox を使用して電卓を設計する場合、さまざまなサイズのキーを作成しようとすると課題が発生する可能性があります。この記事では、Flexbox を使用して電卓の応答性の高いキーボード レイアウトを実装することで、この問題に対処する方法を説明します。

レイアウト

全角と全角の両方に対応するにはキーの場合、レイアウトは 2 つのセクションに分かれています:

1. メイン キー: 単一の幅を占める標準キー。これらは、フレックスラップを使用してフレックスボックス コンテナーに配置され、必要に応じて複数の行を作成します。

2. 特殊キー: 倍の幅または高さを必要とするキーは、独自のキーでラップされます。フレックスボックス コンテナ:

   • 倍幅キー: ゼロ キーは倍幅キーで、メイン キー セクションのスペースの 66.67% に及ぶフレックス コンテナ内に含まれています。 .
   • 高さ 2 倍のキー: 等号キーは高さ 2 倍のキーで、特殊キー セクションの高さ全体にわたるフレックス コンテナー内に含まれています。

CSS スタイル

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

結果

このレイアウトにより、すべてのキーの位置とサイズが正しく設定されます。 、デスクトップとモバイルデバイスの両方で。イコール キーの高さは 2 倍、ゼロ キーの幅は 2 倍であり、応答性の高いカスタマイズ可能なレイアウトを作成する際の Flexbox の多用途性を示しています。

以上がFlexbox を使用して応答性の高い電卓のキーパッド レイアウトを設計するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。