CSS Flexbox

1
2
3
4
5
6
7
8

ลองทดลองเอง

โมดูลการจัดเรียง CSS Flexbox

ก่อนการเปิดตัวของโมดูลการจัดเรียงแบบ Flexbox มีโมดูลการจัดเรียงที่สามารถใช้ได้ 4 รูปแบบ

  • บล็อค (Block) ใช้สำหรับส่วน (หนึ่งหน่วย) ของเว็บไซต์
  • ภายในเนื้อเรื่อง (Inline) ใช้สำหรับข้อความ
  • ตาราง ใช้สำหรับข้อมูลตารางสองมิติ
  • การจัดตำแหน่ง ใช้สำหรับตำแหน่งเฉพาะขององค์ประกอบ

โมดูลการจัดเรียงแบบ Flexbox ที่สามารถออกแบบโครงสร้างการจัดเรียงแบบเรสโปนซีฟแบบยอมรับง่าย โดยไม่ต้องใช้เทคนิคเฟลกซ์หรือการจัดตำแหน่ง

การสนับสนุนเว็บเบราเซอร์

ทั้งหมดเว็บเบราเซอร์ที่ใช้งานปัจจุบันทุกตัวต่าง ๆ สนับสนุน flexbox ขอบเขต

29.0 11.0 22.0 10 48

องค์ประกอบ Flexbox

เพื่อเริ่มใช้ Flexbox โมเดล คุณต้องการกำหนด Flex คอนเทนเนอร์ก่อนไปแรก

1
2
3

องค์ประกอบด้านบนนี้แสดงว่าเป็นภาชนะ flex ที่มี flex โปรเจกต์สามโปรเจกต์ (พื้นที่สีส้มนี้)

ตัวอย่าง

ภาชนะ flex ที่มี flex โปรเจกต์สามโปรเจกต์

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

ลองทดลองเอง

องค์ประกอบพ่อ (ภาชนะ)

ด้วยการใช้ display คุณสมบัติตั้งค่าเป็น flexภาชนะ flex จะเป็นภาชนะที่สามารถยกยอดได้

1
2
3

ตัวอย่าง

.flex-container {
  display: flex;
}

ลองทดลองเอง

ด้านล่างนี้คือคุณสมบัติของภาชนะ flex

นิยาย flex-direction

flex-direction คุณสมบัติกำหนดทางที่ภาชนะจะจัดแบบบรรยาย flex โปรเจกต์

1
2
3

ตัวอย่าง

column ค่าจะจัดให้ flex โปรเจกต์จัดแบบแบนด์วอร์ค (จากบนไปทางล่าง)

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

ลองทดลองเอง

ตัวอย่าง

column-reverse ค่าจะจัดให้ flex โปรเจกต์จัดแบบแบนด์วอร์ค (จากล่างไปทางบน)

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

ลองทดลองเอง

ตัวอย่าง

row ค่าจะจัดให้ flex โปรเจกต์จัดแบบนอร์ทวอร์ค (จากซ้ายไปทางขวา)

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

ลองทดลองเอง

ตัวอย่าง

row-reverse ค่าจะจัดให้ flex โปรเจกต์จัดแบบนอร์ทวอร์ค (จากขวาไปทางซ้าย)

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

ลองทดลองเอง

นิยาย flex-wrap

flex-wrap คุณสมบัติกำหนดว่าควรเปลี่ยนแบบบรรยายของ flex โปรเจกต์หรือไม่

ตัวอย่างด้านล่างมี flex โปรเจกต์ 12 โดยมีจุดประสงค์เพื่อแสดงคุณสมบัติ flex-wrap ได้ดีขึ้น

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ตัวอย่าง

wrap ค่ากำหนดว่า flex โปรเจกต์จะเปลี่ยนแบบบรรยายเมื่อมีความจำเป็น

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

ลองทดลองเอง

ตัวอย่าง

nowrap ค่ากำหนดว่าจะไม่มีการเปลี่ยนแบบบรรยายของ flex โปรเจกต์ (ค่าเริ่มต้น)

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

ลองทดลองเอง

ตัวอย่าง

wrap-reverse ค่ากำหนดว่าถ้ามีความจำเป็น โปรเจกต์ที่มีลูกใน flex จะเปลี่ยนแบบบรรยายที่มีลำดับตรงกันข้าม

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

ลองทดลองเอง

นิยาย flex-flow

flex-flow คุณสมบัติเป็นคุณสมบัติย่อที่ใช้ในการตั้งค่า flex-direction และ flex-wrap ในหนึ่งคำ

ตัวอย่าง

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

ลองทดลองเอง

นิยาย justify-content

justify-content คุณสมบัติสำหรับเรียงตัวของ flex โปรเจกต์

1
2
3

ตัวอย่าง

center ค่าจะจัดให้ flex โปรเจกต์ตั้งตรงข้างของกลางภาชนะ

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

ลองทดลองเอง

ตัวอย่าง

flex-start ค่าจะจัดให้ flex โปรเจกต์ตั้งตรงข้างของที่สุดของภาชนะ (ค่าเริ่มต้น)

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

ลองทดลองเอง

ตัวอย่าง

flex-end ค่าจะจัดให้ flex โปรเจกต์ตั้งตรงข้างของที่สุดของภาชนะ

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

ลองทดลองเอง

ตัวอย่าง

space-around ค่าแสดงว่า flex โปรเจกต์ที่มีช่องว่างก่อน ระหว่าง และหลังบรรยาย

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

ลองทดลองเอง

ตัวอย่าง

space-between ค่าแสดงว่า flex โปรเจกต์ที่มีช่องว่างระหว่างบรรยาย

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

ลองทดลองเอง

นิยาย align-items

align-items คุณสมบัติสำหรับเรียงตัวของ flex โปรเจกต์ตามติดตั้ง

1
2
3

ในตัวอย่างเหล่านี้ เราใช้ภาชนะสูง 200 พิกเซลเพื่อแสดงถึงคุณสมบัติ align-items ได้ดีขึ้น

ตัวอย่าง

center ค่าที่จัดลำดับองค์ประกอบ flex ที่กลางของตัวแทน:

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

ลองทดลองเอง

ตัวอย่าง

flex-start ค่าที่จัดลำดับองค์ประกอบ flex ที่ด้านบนของตัวแทน:

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

ลองทดลองเอง

ตัวอย่าง

flex-end ค่าที่จัดลำดับองค์ประกอบ flex ที่ด้านล่างของตัวแทน:

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

ลองทดลองเอง

ตัวอย่าง

stretch ค่าที่ทำให้องค์ประกอบ flex ขยายเพื่อเติมตัวแทน (ค่าเริ่มต้น):

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

ลองทดลองเอง

ตัวอย่าง

baseline ค่าที่ทำให้องค์ประกอบ flex จัดลำดับตามระดับพื้นฐาน:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

ลองทดลองเอง

ข้อเตือน:ตัวอย่างนี้ใช้ font-size ต่างกันเพื่อแสดงว่าองค์ประกอบได้ถูกจัดลำดับตามระดับพื้นฐานของข้อความ:

1
2
3
4

นิยาย align-content

align-content คุณสมบัตินี้ใช้เพื่อจัดลำดับรายการยืดเยื้อ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ในตัวอย่างเหล่านี้ เราใช้ตัวแทนสูง 600 พิกเซล และตั้งค่าคุณสมบัติ flex-wrap ให้เป็น wrap เพื่อแสดงคุณสมบัติ align-content ได้ดียิ่งขึ้น。

ตัวอย่าง

space-between ค่าแสดงรายการยืดเยื้อที่มีระยะห่างเท่าๆกันระหว่างรายการยืดเยื้อ:

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

ลองทดลองเอง

ตัวอย่าง

space-around ค่าแสดงรายการยืดเยื้อที่มีช่องว่างก่อน ระหว่าง และหลัง:

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

ลองทดลองเอง

ตัวอย่าง

stretch ค่าขยายรายการยืดเยื้อเพื่อเข้าไปที่ช่องว่างที่เหลือ (ค่าเริ่มต้น):

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

ลองทดลองเอง

ตัวอย่าง

center ค่าแสดงรายการยืดเยื้อที่อยู่ที่กลางของตัวแทน:

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

ลองทดลองเอง

ตัวอย่าง

flex-start ค่าแสดงรายการยืดเยื้อที่อยู่ที่ต้นของตัวแทน:

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

ลองทดลองเอง

ตัวอย่าง

flex-end ค่าแสดงรายการยืดเยื้อที่อยู่ที่ท้ายของตัวแทน:

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

ลองทดลองเอง

ศูนย์กลางอย่างสมบูรณ์

ในตัวอย่างด้านล่าง จะมีการแก้ปัญหาสไตล์ที่เป็นไปตามปกติ: ศูนย์กลางอย่างสมบูรณ์。

แนะแนวแก้ปัญหา: จัดตั้ง justify-content และ align-items ตั้งค่าคุณสมบัติเป็นศูนย์กลาง แล้วองค์ประกอบ flex จะศูนย์กลางอย่างสมบูรณ์:

ตัวอย่าง

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

ลองทดลองเอง

องค์ประกอบ (โครงการ)

องค์ประกอบที่เป็นลูกของตัวแทน flex จะกลายเป็นองค์ประกอบยืดเยื้อ (flex) โดยอัตโนมัติ。

1
2
3
4

上面的元素代表一個灰色彈性容器內的四个藍色彈性項目。

ตัวอย่าง

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

ลองทดลองเอง

用於彈性項目的屬性有：

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

order 屬性

order 屬性規定 flex 项目的順序。

1
2
3
4

代碼中的首個 flex 項目不必在佈局中顯示為第一項。

order 值必須是數字，默認值是 0。

ตัวอย่าง

order 屬性可以改變 flex 项目的順序：

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

ลองทดลองเอง

flex-grow 屬性

flex-grow 屬性規定某個 flex 項目相對於其餘 flex 項目將增長多少。

1
2
3

該值必須是數字，默認值是 0。

ตัวอย่าง

使第三個彈性項目的增長速度比其他彈性項目快八倍：

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

ลองทดลองเอง

flex-shrink 屬性

flex-shrink 屬性規定某個 flex 項目相對於其餘 flex 項目將收縮多少。

1
2
3
4
5
6
7
8
9

該值必須是數字，默認值是 0。

ตัวอย่าง

不要讓第三個彈性項目收縮得與其他彈性項目一樣多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">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 屬性

flex-basis 屬性規定 flex 项目的初始長度。

1
2
3
4

ตัวอย่าง

將第三個彈性項目的初始長度設置為 200 像素：

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

ลองทดลองเอง

flex 屬性

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

ตัวอย่าง

使第三個彈性項目不可增長（0），不可收縮（0），且初始長度為 200 像素：

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

ลองทดลองเอง

align-self 屬性

align-self 属性規定彈性容器內所選項目的對齊方式。

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

1
2
3
4

ในตัวอย่างเหล่านี้ เราใช้ฝากสูง 200 พิกเซลเพื่อแสดงคุณสมบัติ align-self ได้ดีขึ้น:

ตัวอย่าง

จัดลำดับองค์ประกอบที่มีลักษณะอัตรายนต์ที่สามของตัวเลขขึ้นตามกลางของฝาก:

<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>

ลองทดลองเอง

คลังภาพที่ใช้ Flexbox ที่สามารถปรับเปลี่ยนทันที

ใช้ flexbox ทำคลังภาพที่สามารถปรับเปลี่ยนทันที ซึ่งเปลี่ยนจากสี่ภาพ สองภาพ หรือภาพครอบหน้าจอตามขนาดหน้าจอ:

ลองทดลองเอง

เว็บไซต์ที่ใช้ Flexbox ที่สามารถปรับเปลี่ยนทันที

ใช้ flexbox ทำเว็บไซต์ที่สามารถปรับเปลี่ยนทันที ซึ่งมีนาฬิกาแบบอัตรายนต์และเนื้อหาที่มีลักษณะอัตรายนต์:

ลองทดลองเอง

CSS Flexbox คุณสมบัติ

ตารางข้างล่างแสดงคุณสมบัติ CSS ที่ใช้กับ flexbox:

คุณสมบัติ บรรยาย
display กำหนดชนิดกล่องสำหรับองค์ประกอบ HTML。
flex-direction กำหนดทิศทางขององค์ประกอบที่มีลักษณะอัตรายนต์ในช่องที่มีลักษณะอัตรายนต์。
justify-content คว่ำแน่นตรงแนวน้ำที่ขององค์ประกอบที่มีลักษณะอัตรายนต์ไม่ใช้ความสูงทั้งหมดของเส้นหลักที่ใช้ในแถวหลัก。
align-items คว่ำแน่นองค์ประกอบเมื่อองค์ประกอบที่มีลักษณะอัตรายนต์ไม่ใช้ความสูงทั้งหมดของเส้นหลักที่ใช้ในแถวหลัก。
flex-wrap กำหนดว่าองค์ประกอบที่มีลักษณะอัตรายนต์ควรเปลี่ยนบวกเลขหรือไม่ หากไม่มีพื้นที่เพียงพอในแถว flex ที่จะรองรับพวกเขา。
align-content แก้ไขพฤติกรรมของ flex-wrap อย่างไร。
flex-flow flex-direction และ flex-wrap ค่าตัวย่อของพวกเขา。
order กำหนดลำดับขององค์ประกอบที่มีลักษณะอัตรายนต์เมื่อเทียบกับองค์ประกอบอื่น ๆ ในฝากตัวเดียวกัน。
align-self ใช้สำหรับองค์ประกอบที่มีลักษณะอัตรายนต์。
flex flex-grow、flex-shrink และ flex-basis ค่าตัวย่อของพวกเขา。