responsive grid of hexagons

CSS et HTML Réactif Grid of Hexagons.

Voir la démo en direct

Grille Flexbox vs CSS

Cette branche utilise Flexbox pour disposer les hexagones. Une autre version utilisant la disposition de la grille CSS est disponible sur la succursale CSS-Grid.
La grille CSS a un support de navigateur plus faible que Flexbox (voir Caniuse) mais rend l'espacement hexagonal plus facile à comprendre et à travailler.

Caractéristiques

• La grille hexagonale est réactive en fonction de la largeur du conteneur ( #hexGrid )
• Les hexagones gardent leur ratio d'aspect en fonction de leur largeur
• Le nombre d'hexagones par ligne est adaptatif et passe de 5 à 2 sur les points de rupture de la requête média
• Un titre et un petit texte glissent sur Hexagon survolent et se concentrent
• Hexagones et peut être vélo avec TAB (navigation au clavier)

Effet de texte et de survol:

Le CSS pour l'effet de texte et de survol est identifié dans la feuille de style hexagons.css . Vous pouvez le supprimer complètement ou modifier l'effet de survol, la police, la taille de la police ...

Changer le nombre d'hexagones par rangée:

La largeur des éléments .hex définit le nombre d'hexagones par rang. Les propriétés CSS qui doivent être modifiées sont toutes dans les requêtes médiatiques sous le HEXAGON SIZING AND EVEN ROW INDENTATION .
Chaque requête multimédia modifie le nombre d'hexagones par ligne.

Pour changer le nombre d'hexagones par rang , vous devez:

Largeur de .hex

Personnalisez le avec les éléments .hex avec:

 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

Exemple pour 8 hexagones sur les lignes étranges (cela signifie qu'il y aura 7 hexagones sur même les lignes):

 w = 100 / 8 = 12.5%

Indent même rangs

Les rangées uniformes (2e, 4e, 6e ...) sont en retrait avec margin-left sur le premier hexagone des rangées uniformes.

Le sélecteur:
Vous pouvez sélectionner cet hexagone avec le sélecteur .hex:nth-child(an+b) (plus d'informations sur le nth-child() pseudo-classe sur MDN). Pour déterminer le sélecteur, vous pouvez utiliser cette règle:

 .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

Exemple pour 8 hexagones sur les lignes étranges (cela signifie qu'il y aura 7 hexagones sur même les lignes):

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

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

Valeur de la marge-gauche:
La valeur de la marge gauche est la moitié de la largeur d'un hexagone, donc pour 8 hexagones sur une rangée étrange:

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

---

Créé par web-tiki