responsive grid of hexagons

CSS y HTML Red de Hexagons de Hexagons.

Ver demostración en vivo

Flexbox vs CSS Grid

Esta rama usa Flexbox para diseñar los hexágonos. Otra versión que usa el diseño de la cuadrícula CSS es disponible en la rama CSS-Grid.
La red CSS tiene soporte de navegador más bajo que Flexbox (ver Caniuse), pero hace que el espacio hexágono sea más fácil de entender y trabajar.

Características

• La cuadrícula del hexágono responde según el ancho del contenedor ( #hexGrid )
• Los hexágonos mantienen su relación de aspecto según su ancho
• El número de hexágonos por fila es adaptativo y cambia de 5 a 2 en los puntos de interrupción de la consulta de los medios
• Un título y un texto corto se deslizan sobre Hexagon Hover y Focus
• Hexagons y se puede andar en bicicleta con la pestaña (Navegación del teclado)

Texto y efecto de desplazamiento:

El CSS para el texto y el efecto flotar se identifica en la hoja de estilo hexagons.css . Puede eliminarlo por completo o cambiar el efecto flotante, fuente, tamaño de fuente ...

Cambiar el número de hexágonos por fila:

El ancho de los elementos .hex define el número de hexágonos por fila. Las propiedades de CSS que deben cambiarse están todas en las consultas de los medios bajo el HEXAGON SIZING AND EVEN ROW INDENTATION .
Cada consulta de medios cambia el número de hexágonos por fila.

Para cambiar el número de hexágonos por fila , debe:

Ancho de .hex

Personalice con los elementos .hex con:

 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

Ejemplo para 8 hexágonos en filas impares (esto significa que habrá 7 hexágonos en filas pares):

 w = 100 / 8 = 12.5%

Sangría incluso filas

Las filas incluso (2ª, 4ª, 6ª ...) están sangradas con margin-left en el primer hexágono de incluso filas.

El selector:
Puede seleccionar ese hexágono con el selector .hex:nth-child(an+b) (más información sobre el pseudo-class en nth-child() en MDN). Para determinar el selector, puede usar esta regla:

 .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

Ejemplo para 8 hexágonos en filas impares (esto significa que habrá 7 hexágonos en filas pares):

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

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

Valor del margen-izquierda:
El valor del margen izquierdo es la mitad del ancho de un hexágono, así que para 8 hexágonos en la fila impar:

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

---

Creado por Web-Tiki