คอนเทนเนอร์ CSS Flexbox

สารบัญ

แสดงสารบัญ

องค์ประกอบหลัก (คอนเทนเนอร์)

เช่นเดียวกับที่เราระบุไว้ในบทที่แล้ว นี่คือ flex คอนเทนเนอร์ (พื้นที่สีน้ำเงิน) พร้อมด้วย flex items สามรายการ:

1

2

3

คอนเทนเนอร์ดิ้นจะมีความยืดหยุ่นโดยการตั้งค่าคุณสมบัติ display <รหัส class="w3-codespan">ดิ้น:

ตัวอย่าง

 .flex-container {
  
  display: flex;
}

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

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

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

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

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

คุณสมบัติคอนเทนเนอร์ดิ้นคือ:

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

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

คุณสมบัติ flex-direction กำหนดทิศทางที่คอนเทนเนอร์ต้องการซ้อนรายการ Flex

1

2

3

ตัวอย่าง

column ค่ากองรายการดิ้นในแนวตั้ง (จากบนลงล่าง):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

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

</body>
</html>

ตัวอย่าง

column-reverse ค่าสแต็ครายการดิ้นในแนวตั้ง (แต่จากล่างขึ้นบน):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column-reverse;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: column-reverse;" stacks the flex items vertically (but from bottom to top):</p>

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

</body>
</html>

ตัวอย่าง

row ค่าสแต็ครายการดิ้นในแนวนอน (จากซ้ายไปขวา):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>

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

</body>
</html>

ตัวอย่าง

row-reverse ค่าสแต็ครายการดิ้นในแนวนอน (แต่จากขวาไปซ้าย):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>

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

</body>
</html>

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

คุณสมบัติ flex-wrap ระบุว่ารายการดิ้นควรตัดหรือไม่

ตัวอย่างด้านล่างมีรายการดิ้น 12 รายการ เพื่อแสดงให้เห็น ได้ดียิ่งขึ้น คุณสมบัติดิ้นห่อ

1

2

3

4

5

6

7

8

9

10

11

12

ตัวอย่าง

ค่า wrap ระบุว่ารายการดิ้นจะตัดถ้าจำเป็น:

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

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

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

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

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

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

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

<p>Try resizing the browser window.</p>

</body>
</html>

ตัวอย่าง

ค่า nowrap ระบุว่ารายการดิ้นจะไม่ตัด (สิ่งนี้ เป็นค่าเริ่มต้น):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is default):</p>

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

<p>Try resizing the browser window.</p>

</body>
</html>

ตัวอย่าง

ค่า wrap-reverse ระบุว่ารายการที่มีความยืดหยุ่นจะตัด หากจำเป็น ให้ทำตามลำดับย้อนกลับ:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap if necessary, in reverse order:</p>

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

<p>Try resizing the browser window.</p>

</body>
</html>

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

คุณสมบัติ flex-flow เป็นคุณสมบัติชวเลขสำหรับการตั้งค่าทั้ง ดิ้นทิศทางและ คุณสมบัติ flex-wrap

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-flow Property</h1>

<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>

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

<p>Try resizing the browser window.</p>

</body>
</html>

คุณสมบัติปรับเนื้อหา

justify-content คุณสมบัติที่ใช้ในการจัดแนวรายการดิ้น:

1

2

3

ตัวอย่าง

center ค่าจัดตำแหน่งรายการดิ้นที่กึ่งกลางของภาชนะ:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

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

</body>
</html>

ตัวอย่าง

flex-start ค่าจัดตำแหน่งรายการดิ้นที่จุดเริ่มต้นของภาชนะ (นี่คือค่าเริ่มต้น):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-start;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: flex-start;" aligns the flex items at the beginning of the container (this is default):</p>

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

</body>
</html>

ตัวอย่าง

flex-end ค่าจัดตำแหน่งรายการดิ้นที่ส่วนท้ายของภาชนะ:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-end;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: flex-end;" aligns the flex items at the end of the container:</p>

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

</body>
</html>

ตัวอย่าง

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p>

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

</body>
</html>

ตัวอย่าง

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: space-between;" displays the flex items with space between the lines:</p>

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

</body>
</html>

คุณสมบัติการจัดตำแหน่งรายการ

align-items คุณสมบัติที่ใช้ในการจัดแนวรายการดิ้น

1

2

3

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

ตัวอย่าง

ค่า center จัดตำแหน่งรายการดิ้นตรงกลาง คอนเทนเนอร์:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

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

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

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

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

</body>
</html>

ตัวอย่าง

flex-start ค่าจัดตำแหน่งรายการดิ้นที่ด้านบนของภาชนะ:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  background-color: DodgerBlue;
}

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

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

<p>The "align-items: flex-start;" aligns the flex items at the top of the container:</p>

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

</body>
</html>

ตัวอย่าง

flex-end ค่าจัดตำแหน่งรายการดิ้นที่ด้านล่างของภาชนะ:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  background-color: DodgerBlue;
}

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

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

<p>The "align-items: flex-end;" aligns the flex items at the bottom of the container:</p>

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

</body>
</html>

ตัวอย่าง

ค่า stretch จะขยายรายการดิ้นเพื่อเติมคอนเทนเนอร์ (นี่คือค่าเริ่มต้น):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: DodgerBlue;
}

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

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

<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>

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

</body>
</html>

ตัวอย่าง

ค่า baseline จัดตำแหน่งรายการดิ้น เช่น เส้นพื้นฐานจัดตำแหน่ง:

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

หมายเหตุ: ตัวอย่างใช้ขนาดตัวอักษรที่แตกต่างกันเพื่อแสดงให้เห็นว่ารายการได้รับการจัดเรียงตามบรรทัดฐานของข้อความ:

1

2

3

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</div>  
</div>

</body>
</html>

คุณสมบัติการจัดเนื้อหา

align-content คุณสมบัติที่ใช้ในการจัดตำแหน่งเส้นดิ้น

1

2

3

4

5

6

7

8

9

10

11

12

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

ตัวอย่าง

ค่า space-between แสดงเส้นดิ้นที่มีช่องว่างเท่ากันระหว่างพวกเขา:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
  overflow: scroll;
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>

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

</body>
</html>

ตัวอย่าง

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: space-around;" displays the flex lines with space before, between, and after them:</p>

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

</body>
</html>

ตัวอย่าง

ค่า stretch จะขยายเส้นดิ้นเพื่อใช้ส่วนที่เหลือ พื้นที่ (นี่เป็นค่าเริ่มต้น):

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: stretch;" stretches the flex lines to take up the remaining space (this is default):</p>

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

</body>
</html>

ตัวอย่าง

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: center;" displays the flex lines in the middle of the container:</p>

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

</body>
</html>

ตัวอย่าง

flex-start ค่าจะแสดงเส้นดิ้นที่จุดเริ่มต้นของคอนเทนเนอร์:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: flex-start;" displays the flex lines at the start of the container:</p>

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

</body>
</html>

ตัวอย่าง

flex-end ค่าจะแสดงเส้นดิ้นที่ส่วนท้ายของคอนเทนเนอร์:

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: flex-end;" displays the flex lines at the end of the container:</p>

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

</body>
</html>

การวางศูนย์กลางที่สมบูรณ์แบบ

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

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

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Perfect Centering</h1>

<p>A flex container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="flex-container">
  <div></div>
</div>

</body>
</html>

คุณสมบัติคอนเทนเนอร์ CSS Flexbox

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

align-content: ปรับเปลี่ยนพฤติกรรมของคุณสมบัติ flex-wrap มันคล้ายกับการจัดแนวรายการ แต่แทนที่จะจัดแนวรายการดิ้น กลับจัดแนวเส้นดิ้น
align-items: จัดแนวรายการ Flex ในแนวตั้งเมื่อรายการไม่ได้ใช้พื้นที่ว่างทั้งหมดบนแกนไขว้
display: ระบุชนิดของกล่องที่ใช้สำหรับองค์ประกอบ HTML
flex-direction: ระบุทิศทางของรายการที่มีความยืดหยุ่นภายในคอนเทนเนอร์ดิ้น
flex-flow: คุณสมบัติชวเลขสำหรับทิศทางดิ้นและดิ้นห่อ
flex-wrap: ระบุว่าควรรวมรายการ Flex ไว้หรือไม่ หากมีเนื้อที่ไม่เพียงพอสำหรับรายการ Flex บรรทัดเดียว
justify-content: จัดแนวรายการ Flex ในแนวนอนเมื่อรายการไม่ได้ใช้พื้นที่ว่างทั้งหมดบนแกนหลัก