responsive grid of hexagons

CSS и HTML -отзывчивая сетка гексагонов.

Просмотреть живую демонстрацию

Flexbox VS CSS GRID

Эта ветвь использует Flexbox , чтобы расположить шестигранные. Другая версия, использующая макет сетки CSS , доступна в филиале CSS-Grid.
CSS GRID имеет более низкую поддержку браузера, чем Flexbox (см. Caniuse), но облегчает интервал с шестигранником для понимания и работы.

Функции

• Гексаговая сетка реагирует в соответствии с шириной контейнера ( #hexGrid )
• Гексагоны сохраняют соотношение сторон в соответствии с их шириной
• Количество гексагонов на ряд является адаптивным и изменяется с 5 до 2 на точках разрыва в СМИ
• Название и короткий текст вставлены на шестигранник и фокусируются
• Шестиугольники и могут пройти велосипед с помощью вкладки (навигация по клавиатуре)

Эффект текста и падения:

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) (больше информации о псевдо-классе nth-child() на MDN). Чтобы определить селектор, вы можете использовать это правило:

 .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 шестигран в нечетном ряду:

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

---

Создано веб-тики