Bagaimanakah saya boleh menyesuaikan susun atur papan kekunci kalkulator dengan flexbox?

Reka Letak Papan Kekunci Kalkulator dengan Flexbox

Apabila mereka bentuk kalkulator menggunakan Flexbox, adalah mungkin untuk menyesuaikan saiz dan penampilan kekunci individu. Sebagai contoh, anda boleh meningkatkan ketinggian satu kekunci dan menggandakan lebar satu lagi.

Untuk membuat reka letak tersuai ini, mulakan dengan membalut kekunci dengan saiz yang tidak sekata dalam bekas Flex mereka sendiri. Ini membolehkan anda mengendalikan kunci ini secara berasingan.

1. Balut Kunci Tidak Sekata dalam Bekas Flex:

#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. Laraskan Dimensi Kekunci:

#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;
}

Dengan pendekatan ini, anda boleh mengawal saiz dan susun atur kekunci tertentu tanpa menjejaskan struktur keseluruhan papan kekunci kalkulator.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyesuaikan susun atur papan kekunci kalkulator dengan flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!