หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

CSS และ HTML Responsive Grid ของ hexagons

ดูการสาธิตสด

Flexbox vs CSS Grid

สาขานี้ใช้ FlexBox เพื่อจัดวาง hexagons อีกรุ่นที่ใช้ เค้าโครง CSS Grid คือ Availbale ในสาขา CSS-GRID
CSS Grid มีการรองรับเบราว์เซอร์ที่ต่ำกว่า FlexBox (ดู Caniuse) แต่ทำให้ระยะห่างของหกเหลี่ยมเข้าใจและทำงานได้ง่ายขึ้น

คุณสมบัติ

  • กริดหกเหลี่ยมตอบสนองตามความกว้างของภาชนะบรรจุ ( #hexGrid )
  • Hexagons รักษาอัตราส่วนของพวกเขาตามความกว้างของพวกเขา
  • จำนวน hexagons ต่อแถวนั้นปรับตัวและเปลี่ยนจาก 5 เป็น 2 ในจุดพักของการสืบค้นสื่อ
  • ชื่อและข้อความสั้น ๆ เลื่อนเข้ามาในรูปหกเหลี่ยมและโฟกัส
  • hexagons และสามารถขี่จักรยานด้วยแท็บ (การนำทางแป้นพิมพ์)

เอฟเฟกต์ข้อความและโฮเวอร์:

CSS สำหรับข้อความและเอฟเฟกต์โฮเวอร์ถูกระบุใน hexagons.css stylesheet คุณสามารถลบออกได้อย่างสมบูรณ์หรือเปลี่ยนเอฟเฟกต์โฮเวอร์ตัวอักษรขนาดตัวอักษร ...

การเปลี่ยนจำนวนหกเหลี่ยมต่อแถว:

ความกว้างขององค์ประกอบ .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 hexagons บนแถวแปลก (หมายความว่าจะมี hexagons 7 ในแถวแม้): 

 w = 100 / 8 = 12.5%

การเยื้องแม้กระทั่งแถว

แถวที่สม่ำเสมอ (2, 4, 6 ... ) ถูกเยื้องด้วย margin-left บนหกเหลี่ยมแรกของแถวแม้กระทั่ง

ตัวเลือก:
คุณสามารถเลือกได้ว่า hexagon ด้วยตัวเลือก .hex:nth-child(an+b) (ข้อมูลเพิ่มเติมเกี่ยวกับ nth-child() pseudo-class บน 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 hexagons บนแถวแปลก (หมายความว่าจะมี hexagons 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%

สร้างโดย web-tiki

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด