เริ่มต้นใช้งาน FLEXBOX

Published in

InsightEra

8 min readDec 31, 2019

ในโลกของการทำงานด้าน Frontend มีสิ่งมหัศจรรย์มากมายที่ช่วยให้เราทำงานได้ง่ายและสะดวกขึ้น หนึ่งในนั้นคือ Flexbox บทความนี้เหมาะสำหรับผู้เริ่มต้นหรือผู้ที่ไม่เคยใช้ flexbox มาก่อน

Flexbox Layout vs Layout Mode

ก่อนหน้าที่จะมาเป็น Flexbox Layout ปกติการทำเว็บไซต์จะใช้ Layout mode ในการจัดหน้าหรือส่วนประกอบต่างๆ(Elements) บนหน้าเว็บไซต์ ซึ่ง Layout mode ประกอบด้วย

Block ใช้สำหรับจัดการโครงสร้างหลักหรือลักษณะของการแสดงผลบนหน้าเว็บไซต์ให้อยู่ในรูปแบบของ block
Inline ใช้สำหรับจัดเนื้อหาของข้อความ
Table ใช้สำหรับจัดข้อมูลให้อยู่ในรูปแบบของตาราง
Position ใช้จัดตำแหน่งของ elements ต่างๆ

ตัวอย่างการใช้ layout mode :

<h2>display: block</h2>
<div>
She takes a cookie out of the package.
She drops the cookie. It falls on the floor. 
<p class="ex1"> The cookie breaks.</p>
It breaks into four pieces.
</div>

กำหนด property “display: block”

<style>
p {
 color: red;
}
p.ex1 {
 display: block;
}
</style>

ผลลัพธ์:

ปัจจุบันเว็บไซต์มีความซับซ้อนและหลากหลายมากขึ้น จึงทำให้เกิด Flexbox Layout มาช่วยจัดส่วนประกอบต่างๆบนหน้าเว็บไซต์ ซึ่งมีความสามารถคล้ายกับ Layout mode แต่ Flexbox จะมีคุณสมบัติ(property) ใหม่ๆเพิ่มเข้ามาให้ใช้งาน

Flexbox คืออะไร?

Flexbox หรือ Flexible box เป็นเครื่องมือทาง CSS (Cascading Style Sheets) ที่ช่วยให้การจัดส่วนประกอบต่างๆบนหน้าเว็บไซต์ทำได้ง่ายขึ้น มีความยืดหยุ่นสูง โดยปกติ ถ้าจะใช้ layout mode กับส่วนไหน ต้องเขียน property “display” ให้กับส่วนนั้น แต่การใช้ flexbox จะมีความแตกต่างกันตรงที่ต้องกำหนด property “display” ไว้ที่ส่วนของ container แทน

flexbox ประกอบด้วย

Flex Container หรือ container คือส่วนที่กำหนด property “display” ให้เป็น “flex” และเป็นกล่องที่เก็บ flex items
Flex items คือส่วนต่างๆที่อยู่ภายใน flex container

**flexbox:** a flex container with three flex items

สามารถจัดแต่ละ item ที่อยู่ใน container เดียวกันให้อยู่ในรูปแบบที่ต้องการได้โดยไม่ต้องเขียน CSS Class เอง เช่น การจัดเรียง item ในแนวนอน, แนวตั้ง , ตรงกลางหรือจะสลับตำแหน่งของ item ก็ได้ การที่จะใช้ความสามารถของ flexbox ได้ จำเป็นต้องสร้าง flex container ขึ้นมาก่อน ตามตัวอย่างโค้ดต่อไปนี้

สร้าง flex container :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

กำหนด property “display: flex” :

.flex-container {
  display: flex;
}

จากโค้ดด้านบน ได้ทำการสร้าง flex container และกำหนดให้เป็น flex ซึ่ง <div> ที่อยู่ภายใน flex container ก็คือ flex items ดังรูป

คุณสมบัติของ Flex Container

เมื่อสร้าง flex container แล้ว สามารถใช้คุณสมบัติต่างๆ(properties) เพื่อจัดการและสั่งงานที่ flex container ได้ ประกอบด้วย

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

ใช้กำหนดทิศทางหลักของ flex items ที่อยู่ภายใน flex container ว่าจะให้เรียงเป็นแนวนอน(row) หรือแนวตั้ง(column) หรือเรียกว่า แกนหลัก(main axis) และทิศทางที่ตรงข้ามกับแกนหลักเรียกว่า แกนรอง(cross axis) สามารถจัดวางตำแหน่งของ items ได้ทั้งสองแกน และ items จะมีทิศทางเดียวกับแกนหลักนั่นเอง

ปกติค่าเริ่มต้นของ flex-direction เป็นแบบแนวนอน ทำให้ items หรือของที่อยู่ใน container มีทิศทางไปตามแนวนอน

ทิศทางของ flex-direction มี 4 แบบ คือ

flex-direction: row; (default)
เมื่อกำหนดให้แกนหลักเป็นแบบ row ทำให้ items ที่อยู่ใน container เรียงแถวเป็นแนวนอนซึ่งมีทิศทางตรงกับแนวแกนหลัก

.flex-container {
  display: flex;
}

flex-direction: row-reverse;
เมื่อกำหนดให้แกนหลักเป็นแบบ row-reverse ทำให้ items ที่อยู่ใน container เรียงแถวเป็นแนวนอนและมีทิศทางตรงข้ามกับแนวแกนหลัก

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-direction: column;
เมื่อกำหนดให้แกนหลักเป็นแบบ column ทำให้ items ที่อยู่ใน container เรียงแถวเป็นแนวตั้งซึ่งมีทิศทางตรงกับแนวแกนหลัก

.flex-container {
  display: flex;
  flex-direction: column;
}

flex-direction: column-reverse;
เมื่อกำหนดให้แกนหลักเป็นแบบ column-reverse ทำให้ items ที่อยู่ใน container เรียงแถวเป็นแนวตั้งและมีทิศทางตรงข้ามกับแนวแกนหลัก

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

flex-wrap

กำหนดการวางตัวของ item เมื่อมีขนาดใหญ่กว่าขนาดของ container

flex-wrap: nowrap; (default)
หาก container มีขนาดเล็กกว่า items ทั้งหมด จะทำให้ items เลยออกนอก container ไปทางด้านขวา

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

ซึ่งสามารถแก้ไขปัญหาได้โดยลดขนาดของ items ด้วยการบีบให้เล็กลง เพื่อให้มีขนาดพอดีกับ container

flex-wrap: wrap;
ทำให้ items ดันลงมาด้านล่างตามขนาดของ container โดยมีการจัดเรียง item จากบนลงล่างตามลำดับ

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap-reverse;
ทำให้ items ดันลงมาด้านล่างตามขนาดของ container โดยมีการจัดเรียง item จากล่างขึ้นบน

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow

เป็นการเขียนแบบ shorthand สำหรับการกำหนดค่าของ flex-direction และ flex-wrap

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content

กำหนดการจัดตำแหน่งของ items เมื่อเทียบกับทิศทางของแกนหลัก

ตัวอย่าง การจัดตำแหน่งของ items เมื่อแกนหลักเป็นแนวนอน(row)

justify-content: flex-start; (default)
กำหนดให้ items อยู่ลำดับแรกหรือชิดซ้ายของ container และมีทิศทางตามแนวนอน

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

justify-content: center;
กำหนดให้ items อยู่กึ่งกลางของ container และมีทิศทางตามแนวนอน

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

justify-content: flex-end;
กำหนด items ให้อยู่ชิดขวาของ container และมีทิศทางตามแนวนอน

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

justify-content: space-around;
กำหนดให้ items มีระยะห่างหรือช่องว่างระหว่างด้านซ้าย, ด้านขวาและระหว่าง items มีขนาดเท่ากันและมีทิศทางตามแนวนอน

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

justify-content: space-between;
กำหนดให้มีระยะห่างหรือช่องว่างระหว่าง items ขนาดเท่าๆกันและมีทิศทางตามแนวนอน

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

ตัวอย่าง การจัดตำแหน่งของ items เมื่อแกนหลักเป็นแนวตั้ง(column)

justify-content: flex-start; (default)
กำหนดให้ items อยู่ลำดับแรกหรือบนสุดของ container และมีทิศทางตามแนวตั้ง

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

justify-content: center;
กำหนดให้ items อยู่กึ่งกลางของ container และมีทิศทางตามแนวตั้ง

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

justify-content: flex-end;
กำหนดให้ items อยู่ล่างสุดของ container และมีทิศทางตามแนวตั้ง

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

justify-content: space-around;
กำหนดให้ items มีระยะห่างหรือช่องว่างระหว่างด้านบน, ด้านล่างและระหว่าง items มีขนาดเท่ากัน และมีทิศทางตามแนวตั้ง

.flex-container {
  display: flex;
  flex-direction: column; 
  justify-content: space-around;
}

justify-content: space-between;
กำหนดให้ items มีระยะห่างหรือช่องว่างระหว่างกัน และมีทิศทางตามแนวตั้ง

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

align-items

กำหนดการจัดตำแหน่งของ items เมื่อเทียบกับทิศตรงกันข้ามของแกนหลัก

ตัวอย่าง การจัดตำแหน่งของ items เมื่อแกนหลักเป็นแนวนอน(row) เพราะฉะนั้น การใช้ align-items จะมีผลตามแนวตั้งซึ่งเป็นทิศตรงกันข้ามของแกนหลัก นั่นคือ ด้านบน, กึ่งกลาง และด้านล่าง

align-items: stretch; (default)
ยืดขนาดของ items ให้เท่ากับขนาดของ container

.flex-container {
  display: flex;
  align-items: stretch;
}

align-items: flex-start;
กำหนดให้ items อยู่ด้านบนของ container และมีทิศทางตามแนวนอน

.flex-container {
  display: flex;
  align-items: flex-start;
}

align-items: center;
กำหนดให้ items อยู่กึ่งกลางของ container และมีทิศทางตามแนวนอน

.flex-container {
  display: flex;
  align-items: center;
}

align-items: flex-end;
กำหนดให้ items อยู่ด้านล่างของ container และมีทิศทางตามแนวนอน

.flex-container {
  display: flex;
  align-items: flex-end;
}

ตัวอย่าง การจัดตำแหน่งของ items เมื่อแกนหลักเป็นแนวตั้ง(column) เพราะฉะนั้น การใช้ align-items จะมีผลตามแนวนอนซึ่งเป็นทิศตรงกันข้ามของแกนหลัก นั่นคือ ด้านซ้าย, กึ่งกลาง และด้านขวา

align-items: flex-start;
กำหนดให้ items อยู่ด้านซ้ายของ container และมีทิศทางตามแนวตั้ง

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

align-items: center;
กำหนดให้ items อยู่กึ่งกลางของ container และมีทิศทางตามแนวตั้ง

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

align-items: flex-end;
กำหนดให้ items อยู่ด้านขวาของ container และมีทิศทางตามแนวตั้ง

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

align-content

ใช้สำหรับกำหนด items ใน container ซึ่งจะมีผลเมื่อมีการ wrap หรือการขึ้นบรรทัดใหม่เกิดขึ้น

align-content: stretch; (default)
จะคล้ายกับ align-items: stretch เป็นการยืดขนาดของ items ให้มีขนาดเท่ากับ container

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

align-content: flex-start;
กำหนดให้ items อยู่ด้านบนของ container

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

align-content: center;
กำหนดให้ items อยู่กึ่งกลางของ container

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

align-content: flex-end;
กำหนดให้ items อยู่ด้านล่างของ container

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

align-content: space-between;

กำหนดให้ items เว้นระยะห่างระหว่างกันโดยกระจายตัวอยู่ด้านบนและด้านล่างของ container

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

align-content: space-around;

กำหนดให้ items เว้นระยะห่างด้านบนและด้านล่างของ container และระยะระหว่าง items เท่าๆกัน

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

คุณสมบัติของ Flex items

คุณสมบัติต่างๆ(properties) ที่ใช้จัดการและสั่งงานที่ flex items ประกอบด้วย

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

ใช้กำหนดลำดับการแสดงผลของ items ใน container โดยค่าของลำดับเป็นตัวเลข(number) มีค่าเริ่มต้นเป็น 0

<div class="flex-container">
  <div style="order: 4">1</div>
  <div style="order: 3">2</div>
  <div style="order: 2">3</div> 
  <div style="order: 1">4</div>
</div>

หรือสลับตำแหน่งของ items ตามที่ต้องการ

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 1">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 2">4</div>
</div>

flex-grow

ใช้กำหนดขนาดของแต่ละ item ว่าให้ขยายขนาดเท่าไหร่ใน container เมื่อเทียบกับ items อื่นๆ โดยค่าของขนาดเป็นตัวเลข(number) มีค่าเริ่มต้นเป็น 0

<div class="flex-container">
  <div style="flex-grow: 2">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

**ทำให้ item1 มีขนาดใหญ่กว่า item2 สองเท่า และ item3 มีขนาดใหญ่กว่า item2 แปดเท่า**

flex-shrink

ตรงข้ามกับ flex-grow คือใช้กำหนดขนาดของแต่ละ item ว่าให้ย่อขนาดหรือหดตัวเท่าไหร่ใน container เมื่อเทียบกับ items อื่นๆ โดยค่าของขนาดเป็นตัวเลข(number) มีค่าเริ่มต้นเป็น 1

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 5">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

flex-basis

ใช้กำหนดความยาวเริ่มต้นของ item ใน container

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:500px">3</div>
  <div>4</div>
</div>

**กำหนดให้ความยาวเริ่มต้นของ item3 เท่ากับ 500 พิกเซล**

flex

เป็นการเขียนแบบ shorthand สำหรับการกำหนดค่าของ flex-grow, flex-shrink และ flex-basis

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 300px">3</div>
  <div>4</div>
  <div>5</div>
</div>

**ทำให้ item3 ไม่ขยาย (0), ไม่ย่อขนาด (0) และมีความยาวที่ 300 พิกเซล**

align-self

มีคุณสมบัติคล้ายกับ align-items แต่ align-self ใช้กำหนดตำแหน่งของ item เฉพาะตัวที่ต้องการจัดตำแหน่ง

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

**กำหนดตำแหน่งของ item2 ไว้ข้างบน และ item3 ไว้ข้างล่าง**

สรุป

Flexbox คือการขึ้นโครงชุดการแสดงผลบนหน้าเว็บไซต์ ให้สามารถใช้คุณสมบัติต่างๆ ในการจัด layout ได้ โดยที่ไม่ต้องเขียน CSS Class ขึ้นมาเอง ซึ่งแบ่งออกเป็น 2 ส่วนคือ

Flex Container เป็นที่เก็บ flex items ซึ่งมีคุณสมบัติสำหรับใช้กำหนดที่ส่วนของ container ประกอบด้วย

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

2. Flex Items เป็นส่วนที่อยู่ใน flex container มีคุณสมบัติสำหรับใช้กำหนดที่ส่วนของ item ประกอบด้วย

order
flex-grow
flex-shrink
flex-basis
flex
align-self

นอกจาก flexbox จะช่วยจัดองค์ประกอบบนหน้าเว็บแล้ว ยังช่วยในเรื่องของการจัด layout ที่เป็น responsive อีกด้วย

ถ้ามีคำถามหรืออยากเพิ่มเติมข้อมูล สามารถ comment มาได้เลยค่ะ

A game for learning flexbox!

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com