Flexbox ช่วยในการปรับแต่งเว็บไซต์ได้อย่างไร

Flexbox ช่วยในการปรับแต่งเว็บไซต์ได้อย่างไร

ทำไมต้องเว็บไซต์

ทุกวันนี้เว็บไซต์เป็นสิ่งที่จำเป็นสิ่งหนึ่งสำหรับธุรกิจต่าง ๆ ไม่ว่าจะขนาดเล็ก กลาง หรือใหญ่ เนื่องจากเว็บไซต์เป็นเสมือนสิ่งที่ช่วยแสดงตัวตนของบริษัทนั้น ๆ ในโลกออนไลน์ที่ทุกวันนี้สามารถเข้าถึงได้ง่าย ๆ เพียงแค่ปลายนิ้ว ทั้งยังสามารถให้ข้อมูลต่าง ๆ ที่จำเป็นเกี่ยวกับผลิตภัณฑ์ของบริษัท หรือแม้แต่ช่วยให้ผู้บริโภคสามารถซื้อขายสินค้าได้อย่างสะดวกและรวดเร็วยิ่งขึ้น ทั้งนี้สิ่งหนึ่งที่จำเป็นสำหรับทุก ๆ เว็บไซต์ก็คือหน้าเว็บไซต์ ซึ่งมีวิธีในการสร้างขึ้นมาหลากหลายรูปแบบและหลากหลายวิธี

ในที่นี้เราจะพูดถึงการใช้เครื่องมือตัวหนึ่งสำหรับช่วยในการปรับแต่งเว็บไซต์ที่อาจจะช่วยให้การพัฒนาเว็บไซต์ขึ้นมานั้นสะดวกและง่ายขึ้น เครื่องมือนั้นก็คือ flexbox

Flexbox คืออะไร

รูปภาพจาก w3schools.com

flexbox หรือ flexible box คือเครื่องมือทาง CSS ที่ช่วยให้เราสามารถจัดเรียง element ต่าง ๆ ที่อยู่ใน container เดียวกันได้แบบ responsive ตามที่เราต้องการ โดยวิธีการใช้นั้นจะเริ่มจากการที่เรากำหนด CSS style ตรง container ที่เราต้องการให้เป็น flexbox ด้วย display: flex; เช่น

HTML file:
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

CSS file:
.flex-container {
display: flex;
}

จากนั้นจึงเป็นการจัด element ต่าง ๆ ด้วย option ของ css ดังนี้

flex-direction – กำหนดทิศทางแกนหลักของ element (default = row)

flex-direction: row;

รูปภาพจาก w3schools.com

flex-direction: column;

รูปภาพจาก w3schools.com

flex-wrap – กำหนดว่าถ้า element ต่าง ๆ มีการบีบอัดกันเกิดขึ้นเนื่องจาก container มีขนาดเล็ก จะให้มีการ wrap หรือขึ้นบรรทัดใหม่ใน element ส่วนที่เกินมาหรือไม่ (default = nowrap)

flex-wrap: nowrap;

รูปภาพจาก w3schools.com

flex-wrap: wrap;

รูปภาพจาก w3schools.com

justify-content – กำหนดลักษณะการจัดเรียง element ระหว่างแถวในแนวแกนหลักที่กำหนดใน flex-direction (default = flex-start)

justify-content: flex-start;

รูปภาพจาก w3schools.com

justify-content: flex-end;

รูปภาพจาก w3schools.com

justify-content: center;

รูปภาพจาก w3schools.com

justify-content: space-between;

รูปภาพจาก w3schools.com

justify-content: space-around;

รูปภาพจาก w3schools.com

** space-between ต่างกับ space-around ตรงที่ space-between จะเว้นระยะห่างระหว่างแต่ละ element ให้เท่ากันโดยที่ element อันแรกและอันสุดท้ายจะอยู่ชิดขอบ container แต่ space-around แต่ละ element จะมีระยะห่างทางซ้ายและขวาของ element ตัวเอง (flex-direction: row;) ที่เท่า ๆ กัน จึงทำให้ element อันแรกและอันสุดท้ายไม่ชิดขอบ container **

align-items – กำหนดลักษณะการจัดเรียง element ทั้งหมดโดยรวมในแนวแกนขวางซึ่งจะตรงกันข้ามกับแนวแกนหลักที่กำหนดใน flex-direction (default = stretch)

align-items: stretch;

รูปภาพจาก w3schools.com

* align-items: stretch; จะยืดขนาดแต่ละ element ออกให้พอดีกับ container *

align-items: flex-start;

รูปภาพจาก w3schools.com

align-items: flex-end;

รูปภาพจาก w3schools.com

align-items: center;

รูปภาพจาก w3schools.com

align-items: baseline;

* align-items: baseline; จะเรียงแต่ละ element ตามแนวเส้น baseline ของข้อความของแต่ละ element *

align-content – กำหนดลักษณะการจัดเรียง element ระหว่างแถวในแนวแกนขวางซึ่งจะตรงกันข้ามกับแนวแกนหลักที่กำหนดใน flex-direction และตรงข้ามกับ justify-content (default = stretch)

align-content: stretch;

รูปภาพจาก w3schools.com

* align-content: stretch; จะคล้ายกับ align-items: stretch; *

align-content: flex-start;

รูปภาพจาก w3schools.com

align-content: flex-end;

รูปภาพจาก w3schools.com

align-content: center;

รูปภาพจาก w3schools.com

align-content: space-between;

รูปภาพจาก w3schools.com

align-content: space-around;

รูปภาพจาก w3schools.com

*** align-content จะมีผลกับ element ก็ต่อเมื่อมีการ wrap หรือการขึ้นบรรทัดใหม่เกิดขึ้น ***

ทั้งนี้การใช้ flexbox ยังมี option ให้เลือกใช้อีกหลายอย่างซึ่งขึ้นอยู่กับการใช้งานในแต่ละเว็บไซต์ โดยสามารถศึกษาเพิ่มเติมได้ตาม link ด้านล่าง

– https://www.w3schools.com/css/css3_flexbox.asp
– https://css-tricks.com/snippets/css/a-guide-to-flexbox/

G-ABLE พร้อมให้บริการและคำปรึกษาให้ทุกธุรกิจ เพื่อเตรียมความพร้อมขับเคลื่อนองค์กรสู่ยุคดิจิทัล

ติดต่อสอบถามข้อมูลเพิ่มเติมได้ที่

Contact G-Able

02-781-9333 หรือ

inquiry@g-able.com



Top