คุณสมบัติ justify-content

คุณสมบัติ justify-content กำหนดการจัดตำแหน่ง ขององค์ประกอบตามแกนหลักสำหรับ flex container และตามแกนแนวนอนสำหรับ grid นำไปใช้กับองค์ประกอบแม่

ไวยากรณ์

cssselector {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

ค่าต่างๆ

ค่าเริ่มต้น: flex-start

ตัวอย่าง ค่า flex-start

ขณะนี้แกนมีทิศทางจากซ้ายไปขวา (เกิดจาก flex-direction: row) และบล็อก ชิดไปที่ด้านซ้าย:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า flex-end

ในตัวอย่างนี้ แกนก็มีทิศทางจากซ้าย ไปขวาเช่นกัน แต่บล็อกชิดไปที่ด้านขวา เนื่องจากกำหนด justify-content เป็นค่า flex-end:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า center

ตอนนี้บล็อกจะอยู่ตรงกลางโดยไม่ขึ้นกับ ทิศทางของแกนหลัก:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า space-between

บล็อกกระจายตัวไปตามแกนหลัก โดยที่ องค์ประกอบแรกชิดไปที่จุดเริ่มต้นของแกน และองค์ประกอบสุดท้ายชิดไปที่จุดสิ้นสุด:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า space-around

บล็อกกระจายตัวไปตามแกนหลัก โดยที่ ระหว่างบล็อกแรกกับจุดเริ่มต้นของแกน บล็อกสุดท้าย กับจุดสิ้นสุดของแกนจะมีช่องว่างเท่ากัน กับช่องว่างระหว่างบล็อกอื่นๆ อย่างไรก็ตาม ช่องว่าง จะบวกกัน และระหว่างสองบล็อก ระยะห่าง จะมากกว่าสองเท่า เมื่อเทียบกับระหว่างบล็อกกับจุดเริ่มต้น/สิ้นสุด ของแกน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า center แกนชี้ลง

เปลี่ยนทิศทางของแกนหลัก โดยกำหนด flex-direction เป็นค่า column:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า space-between แกนชี้ลง

ตอนนี้บล็อกจะกระจายตัวเท่าๆ กันตาม แนวตั้ง:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง การจัดตำแหน่งตามจุดเริ่มต้นของแกนแนวนอน (แถว) ใน grid

กำหนดการจัดตำแหน่งสำหรับ องค์ประกอบของเราไปที่จุดเริ่มต้นของแกนแนวนอน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง การจัดตำแหน่งที่กลางแกนแนวนอนใน grid

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง การจัดตำแหน่งตามจุดสิ้นสุดของแกนแนวนอนใน grid

กำหนดการจัดตำแหน่งสำหรับ องค์ประกอบของเราไปที่จุดสิ้นสุดของแกนแนวนอน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ดูเพิ่มเติม