如何使用 Flexbox 設計響應式計算機鍵盤佈局？

使用 Flexbox 的計算器鍵盤佈局

使用 Flexbox 設計計算器在嘗試創建不同大小的按鍵時可能會帶來挑戰。本文將示範如何透過使用 Flexbox 為計算器實現響應式鍵盤佈局來解決此問題。

佈局

同時適應單寬和雙寬鍵，佈局分為兩部分：

1. 主鍵：標準鍵佔據單一寬度。它們排列在帶有 flex-wrap 的 Flexbox 容器中，以根據需要建立多行。

2. 特殊鍵： 需要雙倍寬度或高度的鍵被包裝在自己的中Flexbox 容器：

   • 雙鍵鍵： 零鍵是雙寬鍵，包含在佔主鍵部分66.67% 空間的彈性容器內。
   • 雙高鍵： equals 鍵是雙高鍵，並且包含在一個橫跨特殊鍵整個高度的彈性容器中

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

結果

此佈局確保桌面和行動裝置上的所有按鍵位置和尺寸正確。等號鍵具有雙倍高度，而零鍵具有雙倍寬度，展示了 Flexbox 在創建響應式和可自訂佈局方面的多功能性。

以上是如何使用 Flexbox 設計響應式計算機鍵盤佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！