responsive grid of hexagons

ヘキサゴンのCSSおよびHTMLレスポンシブグリッド。

ライブデモを表示します

FlexBox対CSSグリッド

このブランチは、 FlexBoxを使用してヘキサゴンをレイアウトします。 CSSグリッドレイアウトを使用する別のバージョンは、CSS-GridブランチのAvayBaleです。
CSSグリッドは、FlexBoxよりもブラウザのサポートが低い（Caniuseを参照）が、Hexagonの間隔を理解しやすくしやすくします。

特徴

• 六角形のグリッドは、コンテナの幅に応じて応答します（ #hexGrid ）
• ヘキサゴンは幅に応じてアスペクト比を維持します
• 1列あたりのヘキサゴンの数は適応性があり、メディアクエリのブレークポイントで5から2に変更されます
• ヘキサゴンホバーとフォーカスにタイトルと短いテキストがスライドします
• ヘキサゴンとタブ（キーボードナビゲーション）で循環することができます

テキストとホバー効果：

テキストとホバー効果のCSSは、 hexagons.css styleSheetで識別されます。完全に削除するか、ホバーエフェクト、フォント、フォントサイズを変更できます...

行ごとのヘキサゴンの数を変更する：

.hex要素の幅は、列あたりのヘキサゴンの数を定義します。変更する必要があるCSSプロパティはすべてHEXAGON SIZING AND EVEN ROW INDENTATIONコメントの下のメディアクエリにあります。
各メディアクエリは、行ごとのヘキサゴンの数を変更します。

行あたりのヘキサゴンの数を変更するには、次のことが必要です。

.hexの幅

.hex要素のwithを次のようにカスタマイズします。

 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() pseudo-classの詳細）。セレクターを決定するには、このルールを使用できます。

 .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)

マージン左の価値：
残っているマージンの値は、 1つの六角形の幅の半分であるため、奇妙な列の8ヘキサゴンの場合は次のとおりです。

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

---

Web-Tikiによって作成されました