responsive grid of hexagons

hexagons의 CSS 및 HTML 반응 형 그리드.

라이브 데모를보십시오

Flexbox 대 CSS 그리드

이 지점은 FlexBox를 사용하여 Hexagons를 레이아웃합니다. CSS 그리드 레이아웃을 사용하는 다른 버전은 CSS- 그리드 브랜치의 AVAILBALE입니다.
CSS Grid는 Flexbox (Caniuse 참조)보다 브라우저 지원이 낮지 만 육각 간격을 이해하고 작업하기가 더 쉽습니다.

특징

• 육각 그리드는 컨테이너의 너비에 따라 반응합니다 ( #hexGrid )
• 헥사 폰은 폭에 따라 종횡비를 유지합니다
• 행당 육각형 수는 적응력이 있으며 미디어 쿼리 브레이크 포인트에서 5에서 2로 변경됩니다.
• Hexagon Hover 및 Focus의 제목 및 짧은 텍스트 슬라이드
• 헥사 폰 및 탭으로 순환 할 수 있습니다 (키보드 탐색)

텍스트 및 호버 효과 :

텍스트 및 호버 효과에 대한 CSS는 hexagons.css 스타일 시트에서 식별됩니다. 완전히 제거하거나 호버 효과, 글꼴, 글꼴 크기를 변경할 수 있습니다.

행당 육각형 수 변경 :

.hex 요소의 너비는 행당 육각형 수를 정의합니다. 변경 해야하는 CSS 속성은 모두 HEXAGON SIZING AND EVEN ROW INDENTATION 의견에 따라 미디어 쿼리에 있습니다.
각 미디어 쿼리는 행당 육각형 수를 변경합니다.

행당 육각형 수를 변경 하려면 다음을 수행해야합니다.

.hex 의 너비

.hex 요소를 다음과 함께 사용자 정의하십시오.

 w = width of the .hex elements in percent
x = the number of hexagons you want on the odd rows (1st, 3rd, 5th...)

w = 100 / x

홀수 행에 8 개의 육각형에 대한 예 (이는 행에 7 개의 헥사가 있다는 것을 의미합니다) :

 w = 100 / 8 = 12.5%

줄까지 들여 쓰기

짝수 행 (2, 4, 6 위)은 열의 첫 번째 육각형에서 margin-left 으로 들여 쓰기됩니다.

선택기 :
.hex:nth-child(an+b) 선택기 (MDN의 nth-child() 의사 클래스에 대한 자세한 정보)로 해당 육각형을 선택할 수 있습니다. 선택기를 결정하려면이 규칙을 사용할 수 있습니다.

 .hex:nth-child(an+b)

x = the number of hexagons on odd rows(1st, 3rd, 5th...)
Y = the number of hexagons on even rows(2nd, 4th, 6th...)
a = x + y
b = x + 1

홀수 행에 8 개의 육각형에 대한 예 (이는 행에 7 개의 헥사가 있다는 것을 의미합니다) :

 x = 8
y = 7
a = 8 + 7 = 15
b = 8 + 1 = 9

The selector is : .hex:nth-child(15n+9)

마진 왼쪽 가치 :
남은 마진의 값은 홀수 행에 8 개의 육각형의 경우 1 육각형의 반의 절반 이므로 :

 with of hexagons = 12.5% (see "width of .hex")
margin-left = 12.5 / 2 = 6.25%

---

Web-Tiki에 의해 만들어졌습니다