องค์ประกอบ Flex ใน CSS

นอกจากประเภทโมเดลบล็อกที่เราได้ศึกษามาแล้ว ยังมีอีกประเภทหนึ่ง นั่นคือ องค์ประกอบ flex การที่จะได้องค์ประกอบเหล่านี้มา ต้องกำหนดคุณสมบัติ display ให้มีค่าเป็น flex ให้กับ parent ขององค์ประกอบเหล่านั้น ตัว parent เองจะยังคงเป็น องค์ประกอบระดับบล็อก แต่ลูกของมันจะกลายเป็น องค์ประกอบ flex

องค์ประกอบ flex คล้ายกับองค์ประกอบระดับบล็อกตรงที่สามารถมี ความกว้างและความสูง margin และ padding ได้ อย่างไรก็ตาม ข้อแตกต่างจากองค์ประกอบระดับบล็อกคือ โดยค่าเริ่มต้น องค์ประกอบ flex จะเรียงตัวในแถวภายใน parent ของมัน

ลองมาทดสอบกัน:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex; /* ลูกจะกลายเป็นองค์ประกอบ flex */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат: