ホームページ > ウェブフロントエンド > CSSチュートリアル > Flexbox を使用して、さまざまな高さと幅のキーを備えた電卓キーパッドを作成するにはどうすればよいですか?

Flexbox を使用して、さまざまな高さと幅のキーを備えた電卓キーパッドを作成するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-06 04:43:02
オリジナル
714 人が閲覧しました

How can I use Flexbox to create a calculator keypad with keys of varying heights and widths?

電卓キーパッドのフレックスボックス レイアウトを理解する

フレックスボックスは、柔軟かつ応答性の高い方法で要素を配置するための多用途な方法を提供します。このシナリオでは、さまざまな高さと幅のキーを持つという特定の要件に対処しながら、フレックスボックスを使用して電卓キーパッドを構築することを目的としています。

さまざまなキー サイズを実装する際の課題

当初、flex-direction を列として設定すると、キーの高さが 2 倍になることが提案されていました。ただし、このアプローチでは、別のキーの幅を 2 ​​倍にすることはできません。

フレックス コンテナで不均一なキーをラップする

この課題を克服するには、不均一なキーをラップします。独自のフレックスコンテナ内にあります。そうすることで、特定のニーズに合わせた個別のフレックスボックス レイアウトを作成します。

不均等キー用のカスタム フレックスボックス レイアウト

カスタム フレックスボックス レイアウトの CSS は次のようになります。 :

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

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

#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 > section:last-child { 
    width: 25%;
    display: flex;
    flex-direction: column;
}

#anomaly-keys-wrapper .tall {
    width: 100%;
    flex: 1;
}
ログイン後にコピー

このネストされたフレックスボックス レイアウトにより、特定のキーの高さと幅を個別に制御できます。

結論

フレックスボックス レイアウトと不均等なキーを独自のコンテナーでラップすることにより、さまざまな高さと幅のキーを持つ仕様を満たす電卓キーパッドを正常に作成できます。このアプローチにより、キーパッドがさまざまな画面サイズやデバイスに適切に適応できる、柔軟で応答性の高いレイアウトが実現します。

以上がFlexbox を使用して、さまざまな高さと幅のキーを備えた電卓キーパッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート