ເຂົ້າໃຈການເຮັດວຽກຂອງ CSS Flexbox ແບບງ່າຍໆ ສໍາລັບຜູ້ເລີ່ມຕົ້ນ

ບົດນໍາ

ຖ້າໃຜທີ່ເຄີຍຂຽນເວັບໃນສະໄໝກ່ອນ ໜ້າຈະເຄີຍເຈັບຫົວກັບການຈັດ Layout ໂດຍໃຊ້ float ຫຼື table ທີ່ທັງຫຍຸ້ງຍາກ, ຕ້ອງໄດ້ຂຽນ code ຫຼາຍແຖວ ແລະ ມັກຈະເຮັດໃຫ້ layout ເພເມື່ອເປີດໃນໜ້າຈໍຂະໜາດຕ່າງກັນ. ແຕ່ໃນປັດຈຸບັນ, ການຈັດໜ້າເວັບແມ່ນງ່າຍຂຶ້ນຫຼາຍຍ້ອນການມາເຖິງຂອງ CSS Flexbox.

Flexbox (Flexible Box Layout) ເປັນຮູບແບບການຈັດ Layout ໃນ CSS ທີ່ອອກແບບມາເພື່ອໃຫ້ເຮົາສາມາດຈັດວາງອົງປະກອບຕ່າງໆ (elements) ພາຍໃນ container ໃຫ້ມີຄວາມຢືດຢຸ່ນ. ມັນຊ່ວຍແກ້ບັນຫາການຈັດຕໍາແໜ່ງທັງແນວນອນ ແລະ ແນວຕັ້ງໃຫ້ເປັນເລື່ອງງ່າຍ, ບໍ່ວ່າໜ້າຈໍຈະນ້ອຍ ຫຼື ໃຫຍ່. ໃນບົດຄວາມນີ້, ເຮົາຈະມາທໍາຄວາມເຂົ້າໃຈພື້ນຖານຂອງ Flexbox ໄປນໍາກັນ ເພື່ອໃຫ້ເພື່ອນໆສາມາດນໍາໄປປະຍຸກໃຊ້ກັບໂປຣເຈັກຂອງຕົນເອງໄດ້ທັນທີ

ແນວຄວາມຄິດຫຼັກຂອງ Flexbox

ກ່ອນຈະໄປເບິ່ງ Code, ເຮົາຕ້ອງເຂົ້າໃຈຄໍາສັບ 2 ຄໍາຫຼັກໆຂອງ Flexbox ກ່ອນ ເພື່ອໃຫ້ເຫັນພາບລວມດຽວກັນ:

1. Flex Container: ຄືກ່ອງໃຫຍ່ທີ່ກວມເອົາ element ທາງໃນ (ພໍ່/ແມ່) ເຊິ່ງເຮົາຈະໃສ່ຄໍາສັ່ງ display: flex; ໄວ້ບ່ອນນີ້.
2. Flex Item: ຄື element ນ້ອຍໆທີ່ຢູ່ທາງໃນ (ລູກ) ເຊິ່ງຈະຖືກຈັດລຽງຕາມກົດເກນທີ່ container ກໍານົດໄວ້.

ນອກຈາກນີ້, Flexbox ຍັງເຮັດວຽກຜ່ານ 2 ແກນຫຼັກຄື: Main Axis (ແກນຫຼັກ) ແລະ Cross Axis (ແກນຕັດ) ເຊິ່ງການປ່ຽນທິດທາງຂອງແກນນີ້ຈະສົ່ງຜົນຕໍ່ການຈັດລຽງໂດຍກົງ.

Property ທີ່ສໍາຄັນໃນ Flex Container

1. ການເປີດໃຊ້ງານ Flexbox

ທຸກຢ່າງເລີ່ມຕົ້ນດ້ວຍການປ່ຽນ element ທໍາມະດາໃຫ້ກາຍເປັນ Flex Container.

.container {
  display: flex;
}

ພຽງແຕ່ຄໍາສັ່ງດຽວ, element ລູກທັງໝົດທີ່ຢູ່ທາງໃນຈະລຽງຕໍ່ກັນເປັນລວງນອນ (ແນວນອນ) ທັນທີ.

2. flex-direction (ກໍານົດທິດທາງ)

ໃຊ້ສໍາລັບກໍານົດທິດທາງການຈັດລຽງຂອງ Flex Item ວ່າຈະໃຫ້ລຽງແບບໃດ.

• row (ຄ່າເລີ່ມຕົ້ນ): ລຽງຈາກຊ້າຍໄປຂວາ
• row-reverse: ລຽງຈາກຂວາໄປຊ້າຍ
• column: ລຽງຈາກເທິງລົງລຸ່ມ
• column-reverse: ລຽງຈາກລຸ່ມຂຶ້ນເທິງ

3. justify-content (ຈັດລຽງໃນແກນຫຼັກ)

ເປັນ property ທີ່ຖືກໃຊ້ເລື້ອຍທີ່ສຸດ ເພື່ອຈັດຕໍາແໜ່ງຂອງ item ໃນແກນຫຼັກ (ແນວນອນໃນກໍລະນີທີ່ເປັນ row):

• flex-start: ຈັດຊິດຊ້າຍ
• flex-end: ຈັດຊິດຂວາ
• center: ຈັດເຄິ່ງກາງ
• space-between: ຍະຫວ່າງລະຫວ່າງກ່ອງໃຫ້ເທົ່າກັນ (ກ່ອງທໍາອິດຊິດຊ້າຍ, ກ່ອງສຸດທ້າຍຊິດຂວາ)
• space-around: ຍະຫວ່າງອ້ອມຮອບແຕ່ລະກ່ອງເທົ່າກັນ

4. align-items (ຈັດລຽງໃນແກນຕັດ)

ໃຊ້ສໍາລັບຈັດຕໍາແໜ່ງຂອງ item ໃນແກນຕັດ (ປົກກະຕິຄືແນວຕັ້ງ):

• flex-start: ຊິດເທິງ
• flex-end: ຊິດລຸ່ມ
• center: ຈັດເຄິ່ງກາງແນວຕັ້ງ
• stretch (ຄ່າເລີ່ມຕົ້ນ): ຢືດໃຫ້ເຕັມຄວາມສູງຂອງ container

Property ທີ່ສໍາຄັນສໍາລັບ Flex Item

ນອກຈາກການຕັ້ງຄ່າທີ່ Container ແລ້ວ, ເຮົາຍັງສາມາດຈັດການ element ລູກ (Flex Item) ແຕ່ລະຕົວໄດ້ອີກດ້ວຍ:

• flex-grow: ກໍານົດວ່າ item ນັ້ນຈະຂະຫຍາຍຕົວເພື່ອເຕີມເຕັມພື້ນທີ່ຫວ່າງໃນ container ຫຼື ບໍ່ (ຄ່າເລີ່ມຕົ້ນຄື 0 ໝາຍເຖິງບໍ່ຂະຫຍາຍ).
• flex-shrink: ກໍານົດວ່າ item ນັ້ນຈະຫົດຕົວລົງ ຫຼື ບໍ່ ເມື່ອພື້ນທີ່ໃນ container ບໍ່ພຽງພໍ.
• order: ໃຊ້ປ່ຽນລໍາດັບການສະແດງຜົນຂອງ item ໂດຍບໍ່ຕ້ອງແກ້ໄຂ HTML (ຄ່າເລີ່ມຕົ້ນຄື 0). ເຊິ່ງມີປະໂຫຍດຫຼາຍໃນການເຮັດ Responsive Design.

ຕົວຢ່າງການນໍາໃຊ້ຈິງ (Code Example)

ການຈັດກາງແບບສົມບູນ (Perfect Centering)

ໃນອະດີດການຈັດ element ໃຫ້ຢູ່ເຄິ່ງກາງທັງແນວນອນ ແລະ ແນວຕັ້ງແມ່ນຍາກຫຼາຍ, ແຕ່ດ້ວຍ Flexbox ເຮົາສາມາດເຮັດໄດ້ພາຍໃນ 3 ແຖວ:

<div class="box-container">
  <div class="box-item">Hello Flexbox!</div>
</div>

.box-container {
  display: flex;
  justify-content: center; /* ຈັດກາງແນວນອນ */
  align-items: center;     /* ຈັດກາງແນວຕັ້ງ */
  height: 100vh;           /* ກໍານົດຄວາມສູງໃຫ້ເຕັມຈໍ */
  background-color: #f4f4f4;
}

.box-item {
  padding: 20px 40px;
  background-color: #007bff;
  color: white;
  border-radius: 8px;
  font-weight: bold;
}

ການສ້າງ Navbar ແບບງ່າຍໆ

Flexbox ເໝາະສົມຫຼາຍສໍາລັບການສ້າງ Navigation bar ທີ່ໂລໂກ້ຢູ່ເບື້ອງຊ້າຍ ແລະ ເມນູຢູ່ເບື້ອງຂວາ.

.navbar {
  display: flex;
  justify-content: space-between; /* ຍູ້ໂລໂກ້ ແລະ ເມນູອອກຈາກກັນ */
  align-items: center;            /* ໃຫ້ທຸກຢ່າງຢູ່ເຄິ່ງກາງແນວຕັ້ງ */
  padding: 15px 30px;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 20px; /* ສ້າງໄລຍະຫ່າງລະຫວ່າງເມນູ */
  list-style: none;
}

ສະຫຼຸບ

CSS Flexbox ເປັນເຄື່ອງມືທີ່ຊົງພະລັງ ແລະ ຂາດບໍ່ໄດ້ສໍາລັບ Web Developer ໃນຍຸກນີ້. ມັນປ່ຽນວິທີການຈັດ Layout ທີ່ເຄີຍຫຍຸ້ງຍາກໃຫ້ກາຍເປັນເລື່ອງງ່າຍ, ໂຄດສະອາດຂຶ້ນ (clean code), ແລະ ຮອງຮັບການເຮັດວຽກແບບ Responsive ໄດ້ເປັນຢ່າງດີ. ມັນອາດຈະເບິ່ງຄືມີຫຼາຍຄໍາສັ່ງໃຫ້ຈື່ໃນຕອນທໍາອິດ, ແຕ່ຖ້າເຂົ້າໃຈຫຼັກການຂອງມັນແລ້ວ ມັນຈະເປັນ framework ໃນໃຈທີ່ຊ່ວຍທ່ານແກ້ບັນຫາ Layout ໄດ້ທຸກຮູບແບບ.