ใช้ Tailwind จัดการ display แบบ Flex

Fri, 05 Jan 2024

display แบบ flexbox คือการจัดเรียง element ให้อยู่ในตำแหน่งที่เราต้องการซึ่งคุณสามารถเข้าไปดูการจัดการ display แบบ flex เบื้องต้นได้ที่บทความเรื่องจัดวาง display ด้วย flexbox ส่วนใครอยากเข้าไปศึกษาการทำงานของ Tailwind เยื้องต้นก็เข้าไปดูได้ที่นี่

เราสามารถใช้ tailwind เข้ามาช่วยจัดการ display แบบ flex ได้ซึ่งวิธีการทำงานจะคล้ายๆกับ css ปกติ ถ้าใครใช้ tailwind อยู่แล้วเราก็ไม่อยากจะเขียน CSS แบบสลับไปสลับมาระหว่าง CSS แบบปกติกับ Tailwind ดังนั้นในบทความนี้เราจึงรวบรวมวิธีการจัดวาง display แบบ flex ด้วย Tailwind มาไว้ที่นี่

กำหนด Display เป็น Flex

เราสามารถกำหนด display เป็น flex โดยใส่ class flex เข้าไปใน container เหมือนกับการเขียน css ที่เราต้องกำหนด display ที่ container เพื่อให้ element ภายในจัดเรียงแบบ flex

เราจะใช้ flex-row เพื่อกำหนด flex-direction เป็น row

และเราจะใส่ flex-1 ให้ทุกๆ เพื่อให้กล่องมีขนาดเท่ากัน(แบ่งพื้นที่เท่าๆกัน)

1
2
3
4
5


<div class="flex flex-row">
  <div class="flex-1">01</div>
  <div class="flex-1">02</div>
  <div class="flex-1">03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Reverse ย้อนกลับ

เราสามารถเรียง elements จากหลังมาหน้าได้ด้วย flex-row-reverse ซึ่งหมายถึงการกำหนด flex-direction เป็น row-reverse

1
2
3
4
5


<div class="flex flex-row-reverse">
  <div class="flex-1">01</div>
  <div class="flex-1">02</div>
  <div class="flex-1">03</div>
</div>

กำหนด Column แรกเป็น Fix Width

ถ้าเราต้องการให้ column แรกมีความกว้างคงที่เราจะใช้ flex-none และกำหนด width เข้าไป column แรกของเราจะมีความกว้างคงที่ ในขณะที่ column ที่ 2 และ column ที่ 3 จะเอาพื้นที่ที่เหลือไปแบ่งเท่าๆกัน

1
2
3
4
5


<div class="flex flex-row">
  <div class="flex-none w-20">01</div>
  <div class="flex-1">02</div>
  <div class="flex-1">03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

ใส่ Grow เพื่อให้ขยายตัวเต็มพื้นที่

ถ้าเราต้องการให้ column ที่ 2 ขยายเต็มพื้นที่เราจะใช้ grow ใน version 2 เราจะใช้ flex-grow

1
2
3
4
5


<div class="flex flex-row">
  <div class="flex-none w-20">01</div>
  <div class="grow">02</div>
  <div class="flex-1">03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

กำหนดตำแหน่งของ Element

เราจะกำหนดให้ elements ภายใน container จัดเรียงอยู่ในตำแหน่งที่เราต้องการได้ด้วย justify-content(แนวนอน) และ align-item(แนวตั้ง)

Justify Content

การจัดเรียงแบบ justify content จะเป็นการจัดเรียงในแนวนอน เช่นต้องการให้ elements ที่อยู่ใน container อยู่ขิดซ้าย ชิดขวาหรืออยู่ตรงกลาง เราจะกำหนดด้วย justify content ซึ่งใน tailwind เราจะใช้คำว่า justify-วิธีการจัดเรียง

Start

เราจะให้ทุกๆ element เริ่มต้นจากด้านซ้าย

1
2
3
4
5


<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Center

ให้ทุกๆ element จัดวางอยู่ตรงกลาง

1
2
3
4
5


<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

End

ถ้าเราต้องการให้เรียงชิดขวาเราจะใช้ justify-end แบบนี้

1
2
3
4
5


<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Space Between

ถ้าเราต้องการให้ element แรกอยู่ชิดซ้ายและ element สุดท้ายอยู่ชิดขวา เราจะใช้ space between ซึ่งหมายถึง space ระหว่าง element เท่านั้น

1
2
3
4
5


<div class="flex justify-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Space Around

ถ้าเราต้องการแบ่งพื้นที่รอบๆ element เท่าๆกันให้เราใช้ justify-around แบบนี้

1
2
3
4
5


<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Align Item

การจัดเรียงแบบ Align item เป็นการจัดเรียงในแนวตั้ง ซึ่งใน tailwind เราจะใช้คำว่า items-วิธีการจัดเรียง

Strech

เป็นการยืด element ให้เต็มพื้นที่ในแนวตั้ง ทุกๆ elements จะมีความสูงเท่ากับ element แม่

1
2
3
4
5


<div class="flex items-stretch ...">
    <div>01</div>
    <div>02</div>
    <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Start

เราจะใช้ items-start เพื่อบอกให้ทุกๆ elements ใน container นี้อยู่ชิดด้านบนแต่ไม่ต้องยืดความสูงให้เท่ากับ element แม่

1
2
3
4
5


<div class="flex items-start ...">
    <div class="pb-8">01</div>
    <div class="pb-24">02</div>
    <div class="pb-16">03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

Center

เป็นการจัดเรียงให้ทุกๆ element อยู่ตรงกลาง(แนวตั้ง)ทั้งหมด

1
2
3
4
5


<div class="flex items-center ...">
    <div class="pb-8">01</div>
    <div class="pb-24">02</div>
    <div class="pb-16">03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

End

เราสามารถจัดเรียงทุก elements ที่อยู่ใน container ให้มีขอบล่างอยู่ด้านล่างสุด

1
2
3
4
5


<div class="flex items-end ...">
    <div class="pb-8">01</div>
    <div class="pb-24">02</div>
    <div class="pb-16">03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

การจัดเรียงลำดับ(Order)

เราสามารถใช้ order ในการเรียงลำดับได้แบบนี้

ย้ายไปท้ายสุด(ขวาสุด)

เราสามารถย้าย element ที่ต้องการไปไว้ท้ายสุดได้ด้วย order-last ในตัวอย่างนี้เราจะย้าย element 01 ไปไว้หลังสุด

1
2
3
4
5


<div class="flex justify-between ...">
  <div class="order-last">01</div>
  <div>02</div>
  <div>03</div>
</div>

ผลลัพธ์จะออกมาเป็นแบบนี้

อ่านต่อเพิ่มเติมได้ที่

https://tailwindcss.com/docs/flex