เรียนรู้ CSS Flexbox ใน 5 นาที - บทช่วยสอนสำหรับผู้เริ่มต้น

คำแนะนำโดยย่อเกี่ยวกับโมดูลเค้าโครงยอดนิยม

ในโพสต์นี้คุณจะได้เรียนรู้พื้นฐานของ CSS Flexbox ซึ่งกลายเป็นทักษะที่ต้องมีสำหรับนักพัฒนาเว็บและนักออกแบบในช่วงสองสามปีที่ผ่านมา

เราจะใช้ navbar เป็นตัวอย่างเนื่องจากเป็นกรณีการใช้งานทั่วไปสำหรับ Flexbox สิ่งนี้จะแนะนำคุณให้รู้จักกับคุณสมบัติที่มีการใช้งานมากที่สุดของโมดูลในขณะที่ปล่อยคุณสมบัติที่ไม่สำคัญเท่า

ฉันยังสร้างหลักสูตร 12 ส่วนฟรีบน Flexbox ตรวจสอบได้ที่นี่หากคุณสนใจ!

มาเริ่มกันเลย!

เค้าโครง Flexbox แรกของคุณ

ทั้งสององค์ประกอบหลักของรูปแบบ flexbox เป็นภาชนะและรายการ

นี่คือ HTML สำหรับตัวอย่างของเราซึ่งมีคอนเทนเนอร์ที่มีสามรายการ:

 Home Search Logout 

ก่อนที่เราจะเปลี่ยนเป็นเลย์เอาต์ Flexbox องค์ประกอบต่างๆจะเรียงซ้อนกันดังนี้:

ฉันได้เพิ่มการจัดแต่งทรงผมเล็กน้อย แต่นั่นไม่เกี่ยวข้องกับ Flexbox

ฉันได้เพิ่มการจัดแต่งทรงผมเล็กน้อย แต่นั่นไม่เกี่ยวข้องกับ Flexbox

หากต้องการเปลี่ยนเป็นเลย์เอาต์ Flexbox เราเพียงแค่ให้คุณสมบัติ CSS ต่อไปนี้แก่คอนเทนเนอร์ :

.container { display: flex; } 

การดำเนินการนี้จะวางตำแหน่งรายการตามแกนแนวนอนโดยอัตโนมัติ

หากคุณต้องการตรวจสอบรหัสจริงคุณสามารถไปที่สนามเด็กเล่น Scrimba นี้

ตอนนี้เรามาสับเปลี่ยนรายการเหล่านี้สักหน่อย

จัดเนื้อหาและจัดแนวรายการ

Justify-contentและalign-itemsเป็นคุณสมบัติ CSS สองรายการที่ช่วยให้เรากระจายรายการในคอนเทนเนอร์ พวกเขาควบคุมวิธีการที่รายการที่อยู่ในตำแหน่งตามแนวแกนหลักและแกนข้าม

ในกรณีของเรา (แต่ไม่เสมอไป) แกนหลักเป็นแนวนอนและแกนกากบาทเป็นแนวตั้ง:

ในบทความนี้เราจะดูเฉพาะที่เป็นฉันได้พบว่ามีการใช้คนนี้มากขึ้นกว่าjustify-content align-itemsอย่างไรก็ตามในหลักสูตร Flexbox ของฉันฉันอธิบายคุณสมบัติทั้งสองอย่างละเอียด

ให้รายการทั้งหมดอยู่ตรงกลางตามแกนหลักโดยใช้justify-content:

.container { display: flex; justify-content: center; } 

หรือเราสามารถตั้งค่าเป็นspace-betweenซึ่งจะเพิ่มช่องว่างระหว่างรายการดังนี้:

.container { display: flex; justify-content: space-between; } 

นี่คือค่าที่คุณสามารถกำหนดได้ justify-content:

  • flex-start ( ค่าเริ่มต้น )
  • ปลายงอ
  • ศูนย์
  • ช่องว่างระหว่าง
  • อวกาศรอบ ๆ
  • เว้นวรรคเท่า ๆ กัน

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

การควบคุมรายการเดียว

นอกจากนี้เรายังสามารถควบคุมเดียวรายการ ตัวอย่างเช่นเราต้องการเก็บสองรายการแรกไว้ทางด้านซ้าย แต่ให้เลื่อนlogoutปุ่มไปทางด้านขวา

autoการทำเช่นนี้เราจะใช้เทคนิคเก่าที่ดีของการตั้งอัตรากำไรขั้นต้นในการ

.logout { margin-left: auto; } 

ถ้าเราต้องการทั้งsearchรายการและlogoutรายการที่จะถูกผลักไปทางด้านขวามือเราก็จะเพิ่มmargin-leftไปยังsearchรายการแทน

.search { margin-left: auto; } 

มันจะดันรายการค้นหาไปทางขวามือที่สุดเท่าที่จะทำได้ซึ่งจะดันรายการออกจากระบบอีกครั้งด้วย:

คุณสมบัติยืดหยุ่น

จนถึงตอนนี้เรามีเฉพาะรายการที่มีความกว้างคงที่ แต่ถ้าเราต้องการให้พวกเขาตอบสนองล่ะ? flexเพื่อให้บรรลุถึงว่าเรามีคุณสมบัติที่เรียกว่า ทำให้ง่ายกว่าวิธีเดิมในการใช้เปอร์เซ็นต์

เราก็จะกำหนดเป้าหมายทุกรายการและให้พวกเขามีค่าของflex1

.container > div { flex: 1; } 

อย่างที่คุณเห็นมันยืดสิ่งของเพื่อเติมเต็มภาชนะทั้งหมด

ในหลาย ๆ กรณีคุณอาจต้องการให้รายการใดรายการหนึ่งมีความกว้างพิเศษจึงกำหนดให้รายการใดรายการหนึ่งมีความกว้างที่ยืดหยุ่นได้ ตัวอย่างเช่นเราสามารถทำให้searchรายการใช้พื้นที่เพิ่มเติมทั้งหมด:

.search { flex: 1; } 

ก่อนที่เราจะจบบทความนี้ผมต้องการที่จะพูดถึงว่าคุณสมบัติดิ้นเป็นจริงจดชวเลขสามคุณสมบัติ: ดิ้นเติบโต , ดิ้นหดตัวและดิ้นพื้นฐาน อย่างไรก็ตามการเรียนรู้เหล่านี้ใช้เวลามากกว่าห้านาทีจึงอยู่นอกขอบเขตของบทช่วยสอนนี้

หากคุณสนใจที่จะเรียนรู้ฉันกำลังอธิบายคุณสมบัติทั้งสามอย่างละเอียดในหลักสูตร Flexbox ฟรีของฉัน

เมื่อคุณได้เรียนรู้พื้นฐานแล้วคุณก็พร้อมที่จะเรียนหลักสูตรเต็มรูปแบบของฉันและกลายเป็นผู้เชี่ยวชาญ Flexbox!

ขอบคุณที่อ่าน! ฉันชื่อ Per Borgen เป็นผู้ร่วมก่อตั้ง Scrimba ซึ่งเป็นวิธีที่ง่ายที่สุดในการเรียนรู้การเขียนโค้ด คุณควรตรวจสอบ bootcamp การออกแบบเว็บที่ตอบสนองของเราหากต้องการเรียนรู้การสร้างเว็บไซต์ที่ทันสมัยในระดับมืออาชีพ