คอร์ส IT พื้นฐาน CSS 032_เลย์เอาต์ยืดหยุ่น Flex

เลย์เอาต์ยืดหยุ่น Flex

มาเป็นเวลานานแล้วที่เครื่องมือสร้างเพียงอย่างเดียวที่เชื่อถือได้และเข้ากันได้กับเบราว์เซอร์ต่างๆ ในเลย์เอาต์ CSS คือ float และ position เครื่องมือทั้งสองนี้ใช้งานได้ดีในกรณีส่วนใหญ่ แต่ในบางด้านมีข้อจำกัดที่ทำให้ยากต่อการทำงานให้สำเร็จ

ความต้องการเลย์เอาต์ง่ายๆ ต่อไปนี้เป็นเรื่องยากหรือเป็นไปไม่ได้ที่จะใช้เครื่องมือเหล่านี้ (float และ position) อย่างสะดวกและยืดหยุ่น:

• จัดกึ่งกลางเนื้อหาบลอกในแนวตั้งภายในเนื้อหาหลัก
• ทำให้รายการย่อยทั้งหมดของคอนเทนเนอร์ครอบครองความกว้าง/ความสูงที่พร้อมใช้งานเท่ากัน ไม่ว่าจะมีความกว้าง/ความสูงที่พร้อมใช้งานเท่าใด
• ทำให้คอลัมน์ทั้งหมดในเลย์เอาต์หลายคอลัมน์มีความสูงเท่ากัน แม้ว่าจะมีปริมาณเนื้อหาที่แตกต่างกัน

เลย์เอาต์ Flex ของ CSS เป็นเครื่องมือเลย์เอาต์ที่ทรงพลังใน CSS ที่สามารถใช้สร้างเลย์เอาต์ที่ยืดหยุ่นได้หลากหลาย เพื่อเชี่ยวชาญเลย์เอาต์ Flex ของ CSS คุณจำเป็นต้องเชี่ยวชาญจุดความรู้ต่อไปนี้:

• Flex container (คอนเทนเนอร์ flex): เลย์เอาต์ Flex ประกอบด้วยคอนเทนเนอร์ Flex และรายการ Flex คอนเทนเนอร์ Flex คือคอนเทนเนอร์ที่วางรายการ Flex ลงในเลย์เอาต์ Flex คอนเทนเนอร์ Flex สามารถเป็นองค์ประกอบใดก็ได้ แต่โดยปกติจะใช้องค์ประกอบ div
• Flex item (รายการ flex): รายการ Flex คือองค์ประกอบที่วางไว้ในคอนเทนเนอร์ Flex รายการ Flex สามารถเป็นองค์ประกอบใดก็ได้ แต่โดยปกติจะใช้องค์ประกอบ div
• Main axis (แกนหลัก): แกนหลักคือทิศทางแนวนอนหรือแนวตั้งขององค์ประกอบในเลย์เอาต์ Flex
• Cross axis (แกนตัดขวาง): แกนตัดขวางคือทิศทางแนวตั้งหรือแนวนอนขององค์ประกอบในเลย์เอาต์ Flex

คุณสมบัติของคอนเทนเนอร์ Flex

คอนเทนเนอร์ Flex มีคุณสมบัติต่อไปนี้เพื่อควบคุมเลย์เอาต์ Flex:

• display: ตั้งค่าโหมดการแสดงผลของคอนเทนเนอร์ Flex คอนเทนเนอร์ Flex ต้องตั้งเป็น display: flex หรือ display: inline-flex เพื่อใช้เลย์เอาต์ Flex
• flex-direction: ตั้งค่าทิศทางของแกนหลักของเลย์เอาต์ Flex ค่าสามารถเป็น flex-start จัดแนวเริ่มต้นแกนหลัก, flex-end จัดแนวสิ้นสุดแกนหลัก, row จัดเรียงแนวนอนแกนหลัก, row-reverse จัดเรียงแนวนอนกลับแกนหลัก, column จัดเรียงแนวตั้งแกนหลัก, column-reverse จัดเรียงแนวตั้งกลับแกนหลัก
• flex-wrap: ควบคุมว่ารายการภายในคอนเทนเนอร์ Flex จะขึ้นบรรทัดใหม่หรือไม่ nowrap ค่าเริ่มต้น ไม่ขึ้นบรรทัดใหม่, wrap ขึ้นบรรทัดใหม่, wrap-reverse ขึ้นบรรทัดใหม่แบบกลับด้าน
• flex-flow: ตัวย่อของ flex-direction และ flex-wrap สองค่าที่สอดคล้องกับ flex-direction และ flex-wrap ตามลำดับ
• justify-content: ตั้งค่าวิธีการจัดแนวของรายการ Flex ในคอนเทนเนอร์ Flex บนแกนหลัก ค่าสามารถเป็น flex-start จัดแนวเริ่มต้นแกนหลัก, flex-end จัดแนวสิ้นสุดแกนหลัก, center จัดแนวกลางแกนหลัก, space-between จัดแนวเฉลี่ยแกนหลัก (จัดแนวปลายคอนเทนเนอร์), space-around จัดแนวเฉลี่ยแกนหลัก (ช่องว่างระหว่างรายการเท่ากัน) หรือ space-evenly จัดแนวเฉลี่ยแกนหลัก (รวมช่องว่างทั้งสองด้านเท่ากัน)
• align-items: ตั้งค่าวิธีการจัดแนวของรายการ Flex ในคอนเทนเนอร์ Flex บนแกนตัดขวาง ค่าสามารถเป็น flex-start จัดแนวเริ่มต้นแกนตัดขวาง, flex-end จัดแนวสิ้นสุดแกนตัดขวาง, center จัดแนวกลางแกนตัดขวาง, stretch ค่าเริ่มต้น หรือ baseline จัดแนวเส้นฐานข้อความบรรทัดแรกแกนตัดขวาง ทำงานเฉพาะกับรายการย่อยของคอนเทนเนอร์ Flex
• align-content: เช่นเดียวกับ align-items เป็นคุณสมบัติที่ควบคุมวิธีการจัดแนวของรายการย่อยบนแกนตัดขวาง มีผลเฉพาะเมื่อคอนเทนเนอร์ Flex มีหลายเส้นแกน (สถานการณ์หลายแถวหรือหลายคอลัมน์)

คุณสมบัติของรายการ Flex

รายการ Flex มีคุณสมบัติต่อไปนี้เพื่อควบคุมเลย์เอาต์ของรายการ Flex ในเลย์เอาต์ Flex:

• flex-grow: ตั้งค่าอัตราส่วนการขยายของรายการ Flex บนแกนหลัก ค่าสามารถเป็นจำนวนทศนิยมระหว่าง 0 ถึง 1
• flex-shrink: ตั้งค่าอัตราส่วนการหดตัวของรายการ Flex บนแกนหลัก ค่าสามารถเป็นจำนวนทศนิยมระหว่าง 0 ถึง 1
• flex-basis: ตั้งค่าความกว้างหรือความสูงเริ่มต้นของรายการ Flex บนแกนหลัก ค่าสามารถเป็นค่าความยาว ค่าเปอร์เซ็นต์ หรือ auto
• order: ตั้งค่าลำดับของรายการ Flex บนแกนหลัก ค่าสามารถเป็นจำนวนเต็มระหว่าง 1 ถึง 65535

ตัวอย่าง:

1
/* สไตล์คอนเทนเนอร์ Flex */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* ทิศทางแกนหลักเป็นแนวนอน */
5
    justify-content: space-around; /* วิธีการจัดแนวบนแกนหลัก */
6
    align-items: center; /* วิธีการจัดแนวบนแกนตัดขวาง */
7
    height: 200px; /* ตั้งค่าความสูงคอนเทนเนอร์ */
8
    border: 2px solid #333; /* เพิ่มกรอบเพื่อผลการมองเห็นที่ดีขึ้น */
9
}
10
/* สไตล์รายการ Flex */
11
.flex-item {
12
    flex: 1; /* แบ่งพื้นที่แกนหลักเท่าๆ กัน */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- คอนเทนเนอร์ Flex -->
2
<div class="flex-container">
3
    <!-- รายการ Flex 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- รายการ Flex 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- รายการ Flex 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

ผลลัพธ์: