CSS Flexbox Model ถูกสร้างขึ้นเพื่อปรับปรุง CSS Box Model ที่สร้างขึ้น โมเดล Flexbox ยังคงมีองค์ประกอบหลักของ Box Model (ระยะขอบ ช่องว่างภายใน เส้นขอบ และเนื้อหา) แต่ให้ความยืดหยุ่นในการเติมพื้นที่ว่างให้ดีที่สุดด้วยลูกของคอนเทนเนอร์/พาเรนต์
บทช่วยสอนนี้จะช่วยให้คุณเข้าใจโมดูล flexbox ได้ดีขึ้นเล็กน้อย คุณจึงสามารถเริ่มทำให้ไซต์ของคุณตอบสนองได้ดียิ่งขึ้น
ต่อไปนี้เป็นรหัสเริ่มต้นสำหรับการสาธิตโมเดล flexbox พื้นฐาน – โปรดปฏิบัติตามในขณะที่เราพูดถึง flexbox!
<!DOCTYPE html>
<head>
<title>Flexbox</title>
<style>
* {
box-sizing: border-box;
font-family: 'Roboto'
}
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
}
.child-item {
height: 200px;
width: 200px;
margin: 0px;
padding: 20px;
}
.child-item:first-child {
background: orange;
}
.child-item.one {
background: purple;
}
.child-item.two {
background: aliceblue;
}
.child-item.three {
background: grey;
}
.child-item.four {
background: pink;
}
.child-item.five {
background: yellowgreen;
}
.child-item.six {
background: red;
}
.child-item.seven {
background: blanchedalmond;
}
.child-item.eight {
background: white;
}
.child-item.nine {
background: lightblue;
}
.child-item.nine {
background: darkred;
}
.child-item:last-child {
background: yellow;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="child-item">Lisa Simpson</div>
<div class="child-item one">Bart Simpson</div>
<div class="child-item two">Maggie Simpson</div>
<div class="child-item three">Homer Simpson</div>
<div class="child-item four">Marge Simpson</div>
<div class="child-item five">Grampa Simpson</div>
<div class="child-item six">Santa's Little Helper</div>
<div class="child-item seven">Apu Nahasapeemapetilon</div>
<div class="child-item eight">Moe Szyslak</div>
<div class="child-item nine">Ned Flanders</div>
<div class="child-item ten">Snowball II</div>
</div>
<script src="" async defer></script>
</body>
</html> คุณสมบัติของคอนเทนเนอร์หลัก (Flexbox)
จอแสดงผล:ดิ้น
คุณสมบัติการแสดงผลมีค่าหลายค่าที่เราสามารถใช้เพื่อวางตำแหน่งคอนเทนเนอร์ของเราบนหน้าจอ คุณอาจเคยเห็น block, inline-block, none, hidden, inline แล้ว แต่สิ่งที่เราจะเน้นในตอนนี้เรียกว่า flex .
อย่างแรก สิ่งที่ฉันอยากให้คุณทำคือจินตนาการถึงภาชนะขนาดใหญ่ เช่น หีบสมบัติ กล่องของเล่น หรือกล่องกระดาษแข็ง จากนั้นลองนึกภาพว่ากำลังวางสิ่งของต่างๆ ลงในภาชนะ ภาชนะขนาดใหญ่คือสิ่งที่เราเรียกว่าแม่ หรือ flexbox และของชิ้นเล็กที่ใส่เข้าไปในภาชนะคือ ลูก หรือ รายการแบบยืดหยุ่น
เมื่อเราเพิ่ม display: flex ในคอนเทนเนอร์หลัก คุณสมบัติถูกกำหนดให้กับคอนเทนเนอร์นั้นและคอนเทนเนอร์นั้นเพียงอย่างเดียว - ไฟล์ย่อยจะไม่สืบทอดคุณสมบัติ (อย่างไรก็ตาม พวกเขาสามารถใช้คุณสมบัติสำหรับคอนเทนเนอร์ของตนเองที่จะส่งผลกระทบต่อ ของพวกเขา เด็ก).
คุณสมบัตินี้เปิดคุณสมบัติอื่น ๆ ทุกประเภทที่เราสามารถใช้ได้ที่เราไม่สามารถทำได้มาก่อน:flex-direction , justify-content , align-items , align-self , flex-wrap และ flex-flow .
เรียกใช้ตัวแก้ไขโค้ดด้านบน ตอนนี้ คุณควรเห็นคอนเทนเนอร์สีเขียวขนาดใหญ่ คอนเทนเนอร์หลัก และคอนเทนเนอร์ขนาดเล็ก 11 รายการ คอนเทนเนอร์ย่อย ภายในพาเรนต์
การวางแนวของคอนเทนเนอร์ย่อยอยู่ด้านบนของกันและกันเนื่องจากค่าเริ่มต้นคือ display: block . ถ้าจำกันได้เมื่อเราใช้ display: block คอนเทนเนอร์จะกินพื้นที่ทั้งแถวที่มีอยู่ ค่าเริ่มต้นของระยะขอบจะขยายเป็นความกว้างของคอนเทนเนอร์หลัก ส่งผลให้คอนเทนเนอร์ย่อยทั้งสองอยู่ทับกัน
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
ในทางตรงกันข้าม การใช้ display: flex ช่วยให้เราจัดตำแหน่งคอนเทนเนอร์ย่อยได้อย่างง่ายดายในแบบที่เราชอบในคอนเทนเนอร์หลัก โดยไม่ต้องใช้คุณสมบัติของกล่องรุ่นเก่า เช่น ลอยและการจัดแนวแนวตั้ง
ลองเพิ่ม display: flex กับ CSS ในแท็กรูปแบบในตัวแก้ไขโค้ดเพื่อให้ CSS ของคอนเทนเนอร์หลักมีลักษณะดังนี้:
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex;
กำลังเพิ่ม display: flex ไปที่ .parent-container จะส่งผลให้ทิศทางของภาชนะลูกเปลี่ยนไป เมื่อคุณกด คุณควรเห็นคอนเทนเนอร์ย่อยอยู่เคียงข้างกัน
โดยใช้ display: flex แทนที่จะ display: block , ระยะขอบเริ่มต้นถูกตั้งค่าเป็น 0 จากนั้นเราสามารถจัดการมันได้ตามที่เห็นสมควร!
ทิศทางการโค้งงอ
คุณสมบัติ flex-direction ตั้งค่าแกนหลักของคอนเทนเนอร์ของเรา การตั้งค่าเริ่มต้นในคอนเทนเนอร์แบบยืดหยุ่นคือ แถว เมื่อตั้งค่าคอนเทนเนอร์หลักด้วย display: flex คุณไม่จำเป็นต้องกำหนดทิศทางแบบยืดหยุ่น เว้นแต่คุณต้องการให้เนื้อหาของคุณอยู่ในคอลัมน์
แกนหลักในทิศทางเริ่มต้นคือซ้ายไปขวา และแกนตัดจากบนลงล่าง ดังที่แสดงที่นี่:
มาลองเพิ่ม flex-direction: column . กัน ไปที่ .parent-container . ของเรา ในโปรแกรมแก้ไขโค้ดด้านบน จะเกิดอะไรขึ้นเมื่อคุณกด?
ดูเหมือนว่าแกนจะพลิกเมื่อเราเปลี่ยน flex-direction ไปที่คอลัมน์:อะไรเป็นแกนหลักของเรากลายเป็นแกนไขว้ แล้วอะไรคือแกนไขว้ของเรากลายเป็นแกนหลัก ดังที่แสดงด้านล่าง:
เป็นผลให้ลูก ๆ ของเราตู้คอนเทนเนอร์ในตัวอย่างของเราพลิกขวานของพวกเขา! ดังนั้นตอนนี้ภาชนะลูกจึงอยู่ด้านบนของกันและกันอีกครั้ง
สิ่งสำคัญที่สุดที่ต้องจำเกี่ยวกับ flex-direction คือทิศทางของแกนหลักสอดคล้องกับค่าของ flex-direction . ของคุณ คุณสมบัติ (คอลัมน์จากบนลงล่าง แถวจากซ้ายไปขวา)
Justify-content เกี่ยวข้องกับระยะห่างบนแกนหลัก และ align-ites เกี่ยวข้องกับระยะห่างรอบแกนไขว้ เราจะพูดถึงคุณสมบัติเหล่านั้นในภายหลัง
มีความเป็นไปได้อีกสองประการสำหรับทิศทางการโค้งงอ:row-reverse และ column-reverse . คุณสมบัติเหล่านี้คล้ายกับแถวและคอลัมน์มาก แต่ flex-items เรียงจากขวาไปซ้ายในกรณีของแถวกลับและล่างขึ้นบนสำหรับคอลัมน์ย้อนกลับ
กรณีการใช้งานสำหรับค่าเฉพาะเหล่านี้เกิดขึ้นเมื่อคุณต้องการมีการจัดวางหรือลำดับที่แตกต่างกันบนหน้าเว็บของคุณจากเว็บไปยังมือถือหรือแท็บเล็ต
flex-wrap
จนถึงตอนนี้ เราได้เรียนรู้วิธี display: flex ส่งผลต่อคอนเทนเนอร์ย่อยของพาเรนต์ และวิธีจัดการโฟลว์ของคอนเทนเนอร์ย่อยเหล่านั้นในแถวหรือในคอลัมน์ เกิดอะไรขึ้นถ้าขนาดของผู้ปกครองหมดห้อง? เกิดอะไรขึ้น? และเราจะแก้ไขได้อย่างไร?
คำตอบมาในรูปแบบของคุณสมบัติที่เรียกว่า flex-wrap . โดยค่าเริ่มต้น flex-wrap ถูกตั้งค่าเป็น nowrap . ซึ่งหมายความว่าคอนเทนเนอร์ย่อยสามารถล้นคอนเทนเนอร์หลัก ทำให้เกิดปัญหาเลย์เอาต์ที่ไม่ต้องการ มาลองเพิ่ม flex-wrap: wrap . กัน; ไปที่ .parent-container และดูว่าเกิดอะไรขึ้น:
เลย์เอาต์ของคอนเทนเนอร์ที่นี่ดูดีกว่ามาก Flex-wrap จะนำส่วนประกอบย่อยทั้งหมดมาวางเคียงข้างกันจนกว่าจะถึงความกว้างของคอนเทนเนอร์หลัก จากนั้นจึงย้ายไปยังแถวถัดไปเพื่อเพิ่มคอนเทนเนอร์ย่อยเพิ่มเติมเพื่อทำซ้ำกระบวนการจนกว่าจะแสดงคอนเทนเนอร์ทั้งหมด
Flex-wrap มีคุณสมบัติสามแบบ:nowrap, wrap และ wrap-reverse wrap-reverse เหมือนกับ wrap ยกเว้นว่ามันไหลจากล่างขึ้นบนแทนที่จะเป็นบนลงล่าง
Flex-flow
Flex-flow เป็นชวเลขสำหรับ flex-direction และ flex-wrap . ไวยากรณ์คือ flex-flow: column wrap หากคุณต้องการให้ flex-direction ของคุณเป็นคอลัมน์ และ flex-wrap ของคุณถูกห่อ flex-flow: row nowrap เป็นค่าเริ่มต้น
ปรับเนื้อหา
คุณสมบัติเนื้อหา justify เกี่ยวข้องกับการจัดแนวตามแกนหลักของคอนเทนเนอร์หลัก ช่วยในการแจกจ่าย flex-items . ของคุณ ข้ามแกนหลักโดยที่คุณไม่ต้องคำนวณพื้นที่ที่ต้องการ ค่าคุณสมบัติ 6 ค่าที่ใช้บ่อยที่สุดสำหรับ justify-content คือ flex-start (ค่าเริ่มต้น), flex-end , center , space-around , space-between และ space-evenly .
เริ่มต้นแบบยืดหยุ่น:
ปลายโค้ง:
ศูนย์:
เว้นวรรค:
ช่องว่างระหว่าง:
เว้นวรรคเท่าๆ กัน:
จัดตำแหน่งรายการ
ความแตกต่างที่ใหญ่ที่สุดระหว่าง align-items และ justify-content นอกจากแกนที่แจกจ่ายคอนเทนเนอร์ย่อยแล้ว ยังเป็นค่าเริ่มต้นอีกด้วย ขอเตือนว่าเมื่อเราใช้ flex-direction ค่าเริ่มต้นสำหรับ justify-content คือ flex-start . นั่นไม่ใช่กรณีของ align-items . ค่าเริ่มต้นคือการยืด
เพื่อให้เห็นภาพ ให้กลับไปที่ตัวแก้ไขโค้ดที่ด้านบนของหน้าและนำความกว้างและความสูงออกจาก .child-container . เรามี display: flex . แล้ว และ flex-direction ชุด. มาสลับไปมาระหว่าง flex-direction: row และ flex-direction: column เพื่อดูว่าคอนเทนเนอร์ทำงานอย่างไรโดยไม่มีข้อจำกัดใดๆ เปรียบเทียบกับสิ่งที่คุณคาดหวังได้อย่างไร
ไม่มี align-items ชุดกฎ คอนเทนเนอร์ย่อยขยายขนาดของคอนเทนเนอร์หลักบนแกนไขว้ อย่างไรก็ตาม หากเราตั้งค่า align-items คุณสมบัติบนคอนเทนเนอร์หลัก ขนาดของคอนเทนเนอร์ย่อยจะปรับโดยอัตโนมัติตามขนาดของเนื้อหา บวกกับช่องว่างภายในและเส้นขอบที่คุณมี
จัดตำแหน่งรายการ:ยืด
จัดตำแหน่งรายการ:กึ่งกลาง
คุณสมบัติอื่นๆ ทั้งหมดที่เราดำเนินการสำหรับ justify-content ใช้ที่นี่กับ align-items และหมายถึงสิ่งเดียวกัน ยกเว้นว่าเราเพิ่งเปลี่ยนแกนที่เราอยู่
คุณสมบัติของตู้คอนเทนเนอร์ย่อย (รายการแบบยืดหยุ่น)
สั่งซื้อ
โดยปกติ ลำดับของคอนเทนเนอร์ในองค์ประกอบหลักจะเป็นไปตามวิธีการจัดวางในไฟล์ HTML อย่างไรก็ตาม หากคุณต้องการควบคุมลำดับของคอนเทนเนอร์ – ตัวอย่างเช่น หากคุณต้องการเน้นคอนเทนเนอร์ย่อยอื่นก่อนเมื่อคุณใช้อุปกรณ์เคลื่อนที่ – คุณสามารถทำได้โดยใช้คุณสมบัติคำสั่ง คุณสมบัติเป็นค่าตัวเลขที่ระบุว่าคอนเทนเนอร์ย่อยควรอยู่ในลำดับใดเมื่อแสดงบนหน้าจอ
จัดตำแหน่งตัวเอง
align-self อนุญาตให้มีการจัดตำแหน่งเริ่มต้นหรือชุดที่กำหนดโดย align-items จะถูกแทนที่ จำไว้ว่า align-self ใช้ได้ก็ต่อเมื่อพาเรนต์เองเป็น display: flex . ค่าสำหรับ align-self สามารถ flex-start , flex-end , พื้นฐานหรือยืด
บทสรุป
ในบทช่วยสอนนี้ เราได้กล่าวถึงพื้นฐานของโมเดลกล่องแบบยืดหยุ่น เราค้นพบว่า flexbox เกี่ยวข้องกับความสัมพันธ์ระหว่างคอนเทนเนอร์หลักและคอนเทนเนอร์รอง คุณสมบัติ flexbox ของพาเรนต์ส่งผลโดยตรงต่อการเคลื่อนไหวของคอนเทนเนอร์ย่อยในพื้นที่ว่างของพาเรนต์
เราใช้ flex-direction , justify-content , align-items และ flex-wrap เพื่อควบคุมตำแหน่งของเด็กในผู้ปกครองและเราใช้คำสั่งและ align-self กับลูกเพื่อแทนที่ค่าเริ่มต้นหรือกฎบางอย่างที่วางไว้บนพาเรนต์
โปรดใช้ตัวแก้ไขโค้ดที่นี่เพื่อเล่นกับคุณสมบัติเหล่านี้เพื่อให้คุณสามารถฝึกฝนได้ คุณกำลังก้าวไปสู่การเป็นผู้เชี่ยวชาญ flexbox!
