Bagaimana untuk membuat susun atur papan kekunci kalkulator menggunakan Flexbox?

Susun atur papan kekunci Kalkulator dengan Flexbox

Flexbox ialah teknik susun atur berkuasa yang membolehkan susunan elemen yang fleksibel dalam susun atur. Ia boleh digunakan untuk mencipta susun atur yang kompleks dengan mudah, menjadikannya ideal untuk mencipta susun atur pad kekunci kalkulator.

Untuk mencipta susun atur papan kekunci kalkulator dengan flexbox, kita boleh menggunakan gabungan bekas flex dan flex barang. Bekas flex akan menjadi elemen induk pad kekunci, dan item flex akan menjadi kunci individu.

Untuk bermula, kami akan mencipta bekas fleksibel untuk pad kekunci. Kita boleh menggunakan sifat paparan untuk menetapkan mod paparan kepada lentur. Kita juga boleh menggunakan sifat flex-direction untuk menetapkan arah item flex. Dalam kes ini, kami akan menetapkannya kepada lajur supaya kekunci akan disusun dalam lajur.

.calculator-keypad {
  display: flex;
  flex-direction: column;
}

Seterusnya, kami akan mencipta item fleksibel untuk kunci individu. Kita boleh menggunakan sifat flex untuk menetapkan sifat flex kunci. Dalam kes ini, kami akan menetapkan sifat flex-grow kepada 1 supaya kekunci akan meregang untuk memenuhi ruang yang tersedia.

.key {
  flex: 1 1 auto;
}

Akhir sekali, kami boleh menambah sedikit penggayaan pada kekunci. Kita boleh menggunakan sifat lebar dan ketinggian untuk menetapkan saiz kekunci. Kami juga boleh menggunakan sifat warna latar belakang untuk menetapkan warna kekunci.

.key {
  width: 25%;
  height: 50px;
  background-color: #f0f0f0;
}

Kekunci dua ketinggian

Untuk mencipta kekunci yang dua kali ganda ketinggian kekunci lain, kita boleh menggunakan sifat flex-basis. Sifat flex-basis menetapkan saiz awal kekunci sebelum ia diregangkan atau dikecilkan agar sesuai dengan ruang yang ada.

.double-height-key {
  flex-basis: 100%;
}

Kunci dua lebar

Untuk mencipta kunci dua kali lebar kekunci lain, kita boleh menggunakan sifat flex-grow. Sifat flex-grow menetapkan jumlah ruang yang kunci akan berkembang apabila terdapat ruang tambahan.

.double-width-key {
  flex-grow: 2;
}

Menyesuaikan reka letak

Susun atur papan kekunci boleh disesuaikan untuk memenuhi keperluan khusus. Sebagai contoh, kekunci nombor boleh disusun dalam matriks, atau kekunci operator boleh dikumpulkan bersama. Kemungkinannya tidak berkesudahan.

Kesimpulan

Flexbox ialah alat yang berkuasa untuk mencipta reka letak yang fleksibel dan responsif. Ia boleh digunakan untuk mencipta reka letak yang kompleks dengan mudah, menjadikannya sesuai untuk mencipta reka letak pad kekunci kalkulator.

Atas ialah kandungan terperinci Bagaimana untuk membuat susun atur papan kekunci kalkulator menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!