รายการ CSS Flexbox

สารบัญ

    แสดงสารบัญ

องค์ประกอบลูก (รายการ)

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

1

2

3

4

องค์ประกอบด้านบนแสดงถึงรายการดิ้นสีน้ำเงินสี่รายการภายในคอนเทนเนอร์ดิ้นสีเทา

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

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

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>

คุณสมบัติรายการดิ้นคือ:

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

คำสั่งทรัพย์สิน

order คุณสมบัติระบุลำดับของรายการดิ้น

1

2

3

4

รายการดิ้นแรกในโค้ดไม่จำเป็นต้องปรากฏเป็นรายการแรกในโครงร่าง

มูลค่าการสั่งซื้อต้องเป็นตัวเลข ค่าเริ่มต้นคือ 0

ตัวอย่าง

คุณสมบัติ order สามารถเปลี่ยนลำดับของรายการดิ้น:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

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

</body>
</html>

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

คุณสมบัติ flex-grow ระบุจำนวนรายการดิ้นที่จะเติบโตเมื่อเทียบกับส่วนที่เหลือของรายการดิ้น

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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

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

</body>
</html>

คุณสมบัติการหดตัวแบบยืดหยุ่น

คุณสมบัติ flex-shrink ระบุจำนวนรายการดิ้นที่จะย่อลงเมื่อเทียบกับส่วนที่เหลือของรายการดิ้น

1

2

3

4

5

6

7

8

9

10

ค่าต้องเป็นตัวเลข ค่าเริ่มต้นคือ 1

ตัวอย่าง

อย่าปล่อยให้รายการดิ้นรายการที่สามหดตัวมากเท่ากับรายการดิ้นอื่นๆ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

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

</body>
</html>

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

flex-basis คุณสมบัติระบุความยาวเริ่มต้นของรายการดิ้น

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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

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

</body>
</html>

คุณสมบัติดิ้น

คุณสมบัติ 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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

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

</body>
</html>

คุณสมบัติการจัดตัวเอง

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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

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

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

ตัวอย่าง

จัดแนวรายการดิ้นที่สองที่ด้านบนของคอนเทนเนอร์ และจัดแนวรายการดิ้นที่สามที่ ด้านล่างของภาชนะ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

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

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

คุณสมบัติรายการ CSS Flexbox

ตารางต่อไปนี้แสดงรายการคุณสมบัติ CSS Flexbox Items ทั้งหมด:

align-self

ระบุการจัดตำแหน่งสำหรับรายการดิ้น (แทนที่คุณสมบัติการจัดตำแหน่งของคอนเทนเนอร์ดิ้น)

flex

คุณสมบัติชวเลขสำหรับ flex-grow, flex-shrink และ flex-basis คุณสมบัติ

flex-basis

ระบุความยาวเริ่มต้นของรายการดิ้น

flex-grow

ระบุจำนวนรายการ Flex ที่จะขยายโดยสัมพันธ์กับรายการ Flex ที่เหลือภายในคอนเทนเนอร์เดียวกัน

flex-shrink

ระบุจำนวนรายการ Flex ที่จะย่อเมื่อเทียบกับส่วนที่เหลือของรายการ Flex ภายในคอนเทนเนอร์เดียวกัน

order

ระบุลำดับของรายการดิ้นภายในคอนเทนเนอร์เดียวกัน