Flexbox를 사용하여 반응형 계산기 키패드 레이아웃을 디자인하는 방법은 무엇입니까?

Flexbox를 사용한 계산기 키패드 레이아웃

Flexbox를 사용하여 계산기를 설계하면 다양한 크기의 키를 생성하려고 할 때 문제가 발생할 수 있습니다. 이 기사에서는 Flexbox를 사용하여 계산기에 반응형 키보드 레이아웃을 구현하여 이 문제를 해결하는 방법을 설명합니다.

레이아웃

단일 너비와 이중 너비를 모두 수용하려면 키의 경우 레이아웃은 두 섹션으로 나뉩니다:

1. 기본 키: 단일 너비를 차지하는 표준 키입니다. 이러한 키는 필요에 따라 여러 행을 생성하기 위해 flex-wrap이 있는 flexbox 컨테이너에 배열됩니다.

2. 특수 키: 두 배의 너비나 높이가 필요한 키는 자체적으로 래핑됩니다. flexbox 컨테이너:

   • 이중 너비 키: 0 키는 이중 너비 키이며 기본 키 섹션 공간의 66.67%에 해당하는 플렉스 컨테이너 내에 포함되어 있습니다. .
   • 이중 높이 키: 등호 키는 이중 높이 키이며 특수 키 섹션의 전체 높이에 걸쳐 있는 플렉스 컨테이너 내에 포함되어 있습니다.

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

결과

이 레이아웃을 사용하면 모든 키의 위치와 크기가 올바르게 지정됩니다. , 데스크톱과 휴대기기 모두에서 가능합니다. 등호 키는 높이가 두 배이고, 0 키는 너비가 두 배로 반응형 및 사용자 정의 가능한 레이아웃을 생성하는 Flexbox의 다양성을 보여줍니다.

위 내용은 Flexbox를 사용하여 반응형 계산기 키패드 레이아웃을 디자인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!