เนื้อหานี้จะมาสรุปการใช้งาน flex ใน bootstrap 4
เป็นอีกหนึ่งแนวทางการกำหนดรูปแบบ layout และการจัดเรียง
รวมถึงการกำหนดขนาด ของการใช้งาน grid ให้สามารถรองรับ
การแสดงผลแบบ responsive ได้อย่างเหมาะสม
การแสดงผลแบบ Flex ใน boostrap
ใน boostrap 4 จะมีการใช้งานการกำหนดการแสดงผล จากเดิม ที่เราคุ้นเคยการใช้งาน display:block
หรือ display:inline-block ของ div และ element อื่น ก็มีการปรับมาใช้เป็นรูปแบบ flex หรือ display:flex
โดย bootstrap ได้มีการใช้งานกับหลาย ๆ element แล้ว เพื่อให้รองรับการแสดงผลแบบ responsive
แต่ไม่ใช่ว่าทุก element ถูกกำหนดเป้น flex ดังนั้น จึงมี flexbox utilities หรือเครื่องมีสำหรับจัดการเกี่ยวกับ
flex มาให้ สามารถดูเพิ่มเติมได้ที่ flex utilities
องค์ประกอบของการใช้งาน Flex ใน bootstrap
ถ้าเราจะใช้งานคุณสมบัติของ flex จะต้องประกอบไปด้วย ส่วนสองส่วนที่สำคัญ ดังนี้คือ ส่วนที่เป็น parent
container และส่วนที่เป็น child item เราเรียกว่า flex container และ flex items ตามลำดับ ตามรูปแบบโค้ดด้านล่าง
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
ตัวอย่างด้านบนเรากำหนด css class สมมติขึ้นมาให้เห็นภาพ ว่าหากเราต้องการใช้งาน flexbox จะมีสองส่วนคือ
ส่วนที่เป็น flex container และส่วนที่เป็น flex items โดยการใช้งาน flex box ไม่จำเป็นว่า element ที่เป็น parent หรือ
child จะต้องเป็น div อย่างเดียว สามารถเป็น element ใดๆ ที่รองรับการใช้งาน flex ก็ได้ เช่น
<ul class="parent"> <li class="child"></li> <li class="child"></li> <li class="child"></li> </ul>
หรือแม้แต่รูปแบบ
<div class="parent"> <a class="child" href="" ></a> <input class="child" type="text"> <button class="child"></button> </div>
จะเห็นว่าในตัวอย่างรูปแบบสุดท้าย child เป็น element ที่แตกต่างกันได้
อย่างไรก็ตาม container และ items ของ flex จะมองแค่ที่ระดับชั้นเดียวเท่านั้น หากต้องการให้รองรับระดับชั้นที่ซ้อน
เพิ่มเข้าไปอีก นั้นหมายความว่า child ก็ต้องกำหนดคุณสมบัติให้เป็น flex ด้วย ตัวอย่างเช่น
<div class="parent">
<a class="child" href="" ></a>
<div class="child parent">
<input class="child" type="text">
<button class="child"></button>
</div>
</div>
จะเห็นว่า ระดับชั้นแรก มี child 2 ตัวคือ a และ div ส่วน input และ button จะเป็น child ของ div อีกที นั่นคือ ถ้าเราไม่
กำหนด div ให้เป็น flex parent ตัว input และ button ก็จะไม่เป็น flex items ซึ่งก็จะไม่รองรับคุณสมบัติ flex นั่นเอง
มาดูในรูปแบบการใช้งาน css class แบบจริงในรูปแบบ flex
<div class="d-flex"> <!-- flex container 1 -->
<a href="" ></a> <!-- flex items 1.1 -->
<div class="d-flex"> <!-- flex items 1.2 + flex conteiner 2 -->
<input type="text"> <!-- flex items 2.1 -->
<button ></button> <!-- flex items 2.2 -->
</div>
</div>
หากเราไม่กำหนด flex ให้กับ div ที่เป็น flex items ของ d-flex แรก ตัว input และ button ก็จะไม่รองรับการ
ใช้งานคุณสมบัติ flex items
ด้วยรูปแบบข้างต้น ทำให้เราสามารถยกเลิกคุณสมบัติ flex items ให้กับส่วนที่เราไม่ต้องการใช้งานได้ โดยการไม่กำหนด
flex ให้กับ div หรืออีกวิธี ก็โดยการเพิ่ม child ใหม่เข้ามาก็ได้ เช่น
<div class="d-flex"> <!-- flex container 1 -->
<a href="" ></a> <!-- flex items 1.1 -->
<div> <!-- flex items 1.2 + ไม่กำหนดเป็น flex container-->
<input type="text"> <!-- ไม่มีคุณสมบัติ flex items -->
<button ></button> <!-- ไม่มีคุณสมบัติ flex items -->
</div>
</div>
หรือ
<div class="d-flex"> <!-- flex container 1 -->
<a href="" ></a> <!-- flex items 1.1 -->
<div class="d-flex"> <!-- flex items 1.1 + flex container 2 -->
<div> <!-- flex items 2.1 -->
<input type="text"> <!-- ไม่มีคุณสมบัติ flex items -->
<button ></button> <!-- ไม่มีคุณสมบัติ flex items -->
</div>
</div>
</div>
ซึ่งสามารถจำแบบให้เข้าใจอย่างง่ายก็คือ element ใดๆ ที่ตัว parent ไม่ได้เป็น flex container
element เหล่านั้นก็จะไม่มีคุณสมบัติ flex items นั่นเอง
รู้จัก css class ทั้งหมดของ flex ใน bootstrap
อย่างที่เรารู้อยู่แล้วว่า flexbox ก็คือรูปแบบ css style ที่เราสามารถกำหนดใช้งานคล้ายกับการกำหนด css style ทั่วไป
ตัวอย่างเช่น
<style type="text/css">
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
</style>
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
สามารถศึกษาเพิ่มเติมได้ที่ CSS Flexbox โดยการทำความรู้จัก
เพิ่มเติมเกี่ยวกับ flex property ต่างๆ ของ flexbox จะทำให้เราสามารถนำมาประยุกต์เพิ่มเติมได้
แต่ในที่นี้เราจะพูดถึงการใช้งาน flex ใน bootstrap ซึ่งได้เตรียม css class ให้เราเรียกใช้งานได้สะดวก และรองรับการ
กำหนด breakpoint { sm md lg และ xl } สำหรับการแสดงผลแบบ responsive
ใครที่ยังไม่่เข้าใจเกี่ยวกับ breakpoint สามารถทบทวนได้ที่เนื้อหาเกี่ยวกับ grid คลิก http://niik.in/880
จะขออธิบายชื่อ css class กับรูปแบบการนำไปใช้ ดังนี้
(*) กำกับด้านหลังคือ เป็นค่าเริ่มต้น หมายถึง ถ้าเราจะใช้ค่า css class นั้น เราไม่ต้องกำหนดก็ได้
Flex Container
ส่วนที่ 1 ใช้สำหรับกำหนดใน flex container หรือ parent
d-flex
d-flex ใช้เป็น flex container แบบกว้างเต็มพื้นที่
d-inline-flex ใช้เป็น flex container แบบกว้างตามขนาดข้อมูลด้านใน
รองรับ breakpoint ในรูปแบบ
d-{breakpoint}-flex
d-{breakpoint}-inline-flex
demo
- item 1
- item 2
- item 3
flex-row
flex-row ให้ items ใน container เรียงในแนวนอน แกน x (*)
flex-column ให้ items ใน container เรียงในแนวตั้ง แกน y
flex-row-reverse ให้ items ใน container เรียงในแนวนอน แกน x และสลับลำดับเรียงหน้าหลัง
flex-column-reverse ให้ items ใน container เรียงในแนวตั้ง แกน y และสลับลำดับเรียงบนล่าง
รองรับ breakpoint ในรูปแบบ
flex-{breakpoint}-row
flex-{breakpoint}-column
flex-{breakpoint}-row-reverse
flex-{breakpoint}-column-reverse
demo
- item 1
- item 2
- item 3
justify-content
justify-content-start ให้ items ใน container เรียงชิดซ้ายติดกันในแนวนอน แกน x (*)
justify-content-end ให้ items ใน container เรียงชิดขวาติดกันในแนวนอน แกน x
justify-content-center ให้ items ใน container เรียงติดกันตรงกลางในแนวนอน แกน x
justify-content-between ให้ items ใน container เรียงโดยมีช่องว่างระหว่างกัน(ถ้ามี)เป็นสัดส่วนในแนวนอน แกน x
justify-content-around ให้ items ใน container เรียงโดยมีช่องว่างรอบตัว(ถ้ามี)เป็นสัดส่วนในแนวนอน แกน x
รองรับ breakpoint ในรูปแบบ
justify-content-{breakpoint}-start
justify-content-{breakpoint}-end
justify-content-{breakpoint}-center
justify-content-{breakpoint}-between
justify-content-{breakpoint}-around
demo
- item 1
- item 2
- item 3
align-items
css class กรณีต่อไปนี้ สำหรับ container ที่มีขนาดความสูง ที่มากกว่า items จะเห็นผลชัดเจน
มีรุปแบบการจัดแรียงในแนวตั้ง ตรงข้างกับการใช้งาน justify-content
align-items-start ให้ items ใน container เรียงชิดด้านบน ในแนวตั้ง แกน y
align-items-end ให้ items ใน container เรียงชิดด้านล่าง ในแนวตั้ง แกน y
align-items-center ให้ items ใน container เรียงอยู่กึ่งกลาง ในแนวตั้ง แกน y
align-items-baseline ให้ items ใน container เรียงโดยอิงตำแหน่งฐาน ปกติใช้ฐานตัวอักษร(ถ้ามี) ในแนวตั้ง แกน y
align-items-stretch ให้ items ใน container ขยายขนาดเต็มความสูงของ container ในแนวตั้ง แกน y (*)
รองรับ breakpoint ในรูปแบบ
align-items-{breakpoint}-start
align-items-{breakpoint}-end
align-items-{breakpoint}-center
align-items-{breakpoint}-baseline
align-items-{breakpoint}-stretch
* เพิ่มเติมสำหรับ align-items ถ้าใช้ร่วมกับ flex-column ตัว items จะเรียงต่อกันจากบนลงล่าง ตำแหน่งจะอิงแนวนอน แกน x ชิดขอบหรือตำแหน่งตามที่กำหนด
demo
- item 1
- item 2
- item 3
flex-wrap
flex-wrap ให้ items ใน container ม้วนลงมาบรรทัดใหม่ ถ้าขนาดความกว้างเกิน container
flex-nowrap ให้ items ใน container เรียงยาวต่อไปในแนวนอน แม้ขนาดจะเกิน container ก็ตาม (*)
flex-wrap-reverse ให้ items ใน container ม้วนลงมาบรรทัดใหม่ ถ้าขนาดความกว้างเกิน container และสลับลำดับหน้าหลัง
รองรับ breakpoint ในรูปแบบ
flex-{breakpoint}-wrap
flex-{breakpoint}-nowrap
flex-{breakpoint}-wrap-reverse
demo
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
- item 7
- item 8
- item 9
- item 10
- item 11
- item 12
- item 13
align-content
css class กรณีนี้มีผลกับ flex items ที่แสดงมากกว่า 1 บรรทัดเท่านั้น หากนำไปใช้กับ items ที่แสดงบรรทัดเดียว
จะไม่มีผลใดๆ เหมาะกับ flex container ที่มี flex items หลายๆ รายการ และแสดงมากกว่า 1 บรรทัด กรณีแสดง บรรทัดเดียว
ให้ใช้เป็น align-items
css class นี้มักใช้รวมกับ flex-wrap เพื่อให้รายการ items ขึ้นบรรทัดใหม่ หากมีขนาดความกว้างเกิน flex container
align-content-start ให้ items ใน container เรียงต่อกันชิดด้านบน ในแนวตั้ง แกน y (*)
align-content-end ให้ items ใน container เรียงต่อกันชิดด้านล่าง ในแนวตั้ง แกน y
align-content-center ให้ items ใน container เรียงต่อกันอยู่กึ่งกลาง ในแนวตั้ง แกน y
align-content-between ให้ items ใน container เรียงต่อกันและมีช่องว่างระหว่างบรรทัด(ถ้ามี) ในแนวตั้ง แกน y
align-content-around ให้ items ใน container เรียงต่อกันและมีช่องว่างบนล่างระหว่างบรรทัด(ถ้ามี) ในแนวตั้ง แกน y
align-content-stretch ให้ items ใน container ขยายขนาดเต็มความสูงของ container ในแนวตั้ง แกน y
รองรับ breakpoint ในรูปแบบ
align-content-{breakpoint}-start
align-content-{breakpoint}-end
align-content-{breakpoint}-center
align-content-{breakpoint}-between
align-content-{breakpoint}-around
align-content-{breakpoint}-stretch
demo
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
- item 7
- item 8
- item 9
- item 10
- item 11
- item 12
- item 13
Flex items
ส่วนที่ 2 ใช้สำหรับกำหนดใน flex items หรือ child
align-self
ในขณะที่ align-items ใช้เรียง items ทั้งหมดใน container ในแนวตั้ง แกน y โดยกำหนดไว้ใน flex container แล้ว
เรายังสามารถกำหนดเฉพาะใน items นั้นๆ เรียงแตกต่างจาก items อื่นๆ โดยใช้ css class นี้ กำหนดไปใน items
ที่ต้องการได้
align-self-start ให้ items ที่ต้องการ ใน container เรียงชิดด้านบน ในแนวตั้ง แกน y
align-self-end ให้ items ที่ต้องการ ใน container เรียงชิดด้านล่าง ในแนวตั้ง แกน y
align-self-center ให้ items ที่ต้องการ ใน container เรียงอยู่กึ่งกลาง ในแนวตั้ง แกน y
align-self-baseline ให้ items ที่ต้องการ ใน container เรียงโดยอิงตำแหน่งฐาน ปกติใช้ฐานตัวอักษร(ถ้ามี) ในแนวตั้ง แกน y
align-self-stretch ให้ items ที่ต้องการ ใน container ขยายขนาดเต็มความสูงของ container ในแนวตั้ง แกน y (*)
รองรับ breakpoint ในรูปแบบ
align-self-{breakpoint}-start
align-self-{breakpoint}-end
align-self-{breakpoint}-center
align-self-{breakpoint}-baseline
align-self-{breakpoint}-stretch
demo
flex items 2
- item 1
- item 2
- item 3
flex-fill
css class นี้ ใช้กำหนดขนาดความกว้างของ items ที่ต้องการ ให้ขยายเต็มพื้นที่ว่างในแนวนอน(ถ้ามี) ดังนั้นขนาดความกว้าง
อย่างน้อยที่สุดของ items นั้นๆ จะเท่ากับขนาดของเนื้อหาใน items นั้น และขนาดความกว้างสูงสุดคือขนาดความกว้างเนื้อหา
ของ items นั้น รวมกับขนาดพื้นที่ว่างที่เหลือถ้ามีในแนวนอน
ส่วน items ที่ไม่ได้กำหนดการใช้งาน flex-fill ขนาดของ items จะลดลงเท่ากับขนาดเนื้อหาของ items นั้นๆ
การกำหนด flex-fill ให้ items ใดๆ มีผลให้ css style ของ items นั้นมีค่า
flex-grow: 1 !important; // ความกว้างสามารถขยายเพิ่มได้อัตโนมัติ โดยอาศัยพื้นที่ว่างนอก items (ถ้ามี)
flex-shrink: 1 !important; // ความกว้างสามารถหดหรือย่อลงได้อัตโนมัติ โดยอาศัยพื้นว่างใน items
flex-basis: auto !important; // ความกว้างน้ยอสุด มากกสุด เป็นไปอัตโนมัติ
รองรับ breakpoint ในรูปแบบ
flex-{breakpoint}-fill
flex-grow และ flex-shrink
ก่อนไปสู่รายละเอียดของส่วนนี้ ให้เราเข้าใจก่อนว่า ปกติแล้ว ค่าเริ่มต้นของ flex property จะมีค่า flex-grow, flex-shrink
และ flex-basis เป็น 0 , 1 และ auto นั่นคือ ไม่สามารถขยายขนาดเพิ่มได้อัตโนมัติ สามารถหดย่อลงได้อัตโนมัติ และมีความ
กว้างเป้นไปอย่างอัตโนมัติตามขนาดของเนื้อหา (ส่วน css class ของ flex-fill จะเป็น 1 1 และ auto)
ดังนั้นการใช้งาน flex-grow และ flex-shrink ที่เป็น css class ของ bootstrap จะเป็นเพียงการปรับค่า css property ที่ชื่อ
flex-grow กับ flex-shrink เท่านั้น ส่วน flex-basis จะเป็นแบบ auto
สำหรับ flex-grow กับ flex-shrink ใน bootstrap จะมีแค่ 2 ค่าคือ 0 กับ 1 คือ
flex-grow-0 ขยายขนาดอัตโนมัติไม่ได้ (*)
flex-grow-1 ขยายขนาดอัตโนมัติได้
flex-shrink-0 หดหรือย่อลงอัตโนมัติไม่ได้
flex-shrink-1 หดหรือย่อลงอัตโนมัติได้
รองรับ breakpoint ในรูปแบบ
flex-{breakpoint}-grow-0
flex-{breakpoint}-grow-1
flex-{breakpoint}-shrink-0
flex-{breakpoint}-shrink-1
ถ้าสังเกตดีๆ หากเราใช้งาน flex-grow-1 จะมีค่าเท่ากับการใช้งาน flex-fill เพราะจะได้ค่า flex-grow, flex-shrink
และ flex-basis เป็น 1, 1 และ auto โดยค่า flex-shrink และ flex-basis เป็นค่าเริ่มต้นที่เราไม่ต้องกำหนด
หรือเราจะกำหนด ใช้ flex-grow กับ flex-shrink ร่วมกัน แบบนี้ ก็ได้ผลลัพธ์เหมือนกัน
<div class="flex-fill"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1 flex-shrink-1"></div>
หากเราต้องการปรับแต่งเพิ่ม เราจำเป็นต้องกำหนด css property ไว้ใน class สำหรับใช้งาน สมมติเช่น เราต้องการกำหนด
ขนาดที่น้อยที่สุด โดยกำหนด flex-basis เป็น 100px ก็จะใช้ในรูปแบบนี้
<style type="text/css">
.min-width-200{
flex-basis: 200px !important;
}
</style>
<div class="flex-shrink-0 min-width-200"></div><!-- ฟิกขนาด 200px ย่อขยายอัตโนมัติไม่ได้ -->
<div class="flex-grow-1 min-width-200"></div> <!-- ฟิกขนาดอย่างน้อย 200px ขยายอัตโนมัติไม่ได้ -->
demo
flex items 1
flex items 2
flex items 3
- item 1
- item 2
- item 3
order
css class นี้ใช้กำหนดลำดับตำแหน่งของ items ที่ต้องการ โดยปกติ ถ้าเรากำหนดด้วย css property ที่ชื่อ order
เราสามารถกำหนดค่าเริ่มต้น ตั้งเลข 0 ไปเรื่ยอๆ ตามต้องการได้ เช่น order:0...order:1..... order:100 โดยลำดับการแสดง
จะแสดงเรียงจากค่าน้อยไปหาค่ามาก ข้อดีก็คือ ถ้าเรามี element ที่อยู่หลัง แต่อยากให้แสดงลำดับแรก ก็กำหนด css property
เป็น order:0 แต่จำไว้ว่า ตัวที่ไม่ได้กำหนด order จะมีค่าเป็น 0 เสมอ นั่นคือถ้ามีตัวที่ไม่กำหนด order อยู่ด้านหน้า element ตัวนั้น
ก็จะแสดงก่อนเสมอ ตัวอย่าง
<div>items 1</div> <div>items 2</div> <div style="order:0;">items 3</div>
ข้างต้น ถึงเราไม่กำหนด order ของ items 1 แต่ค่าเริ่มต้นก็จะเป็น 0 เช่นเดียวกับ items 2 ดังนั้น items 3 เวลาแสดงผลตำแหน่ง
จึงไม่เปลี่ยน ถ้าเราอยากให้ตำแหน่งแรกเป็น items 3 และ items 2 ตามด้วย items 1 ลำดับสุดท้าย ก็จะใช้เป็น
<div style="order:2;">items 1</div> <div style="order:1;">items 2</div> <div style="order:0;">items 3</div>
ใน css class ของ bootstrap จะมีการใช้งาน order ด้วยกัน 13 ตัวคือ ตัวที่มี order ตั้งแต่ 0 - 12 ในรูปแบบ order-{ตัวเลข}
ถ้าเราต้องการตำแหน่งมากกว่านี้ สามารถสร้าง css class ใช้เพิ่มเติมได้ ตัวอย่างการใช้งาน
<div class="order-2">items 1</div> <div class="order-1">items 2</div> <div class="order-0">items 3</div>
จะได้ผลลัพธ์เดียวกันกับการกำหนดด้วย css property
รองรับ breakpoint ในรูปแบบ
order-{breakpoint}-{0-12}
demo
flex items 1
flex items 2
flex items 3
- item 1
- item 2
- item 3
สำหรับใน flex items นอกจากการใช้งาน css class ข้างต้นไปแล้ว เรายังสามารถ ประยุกต์ใช้งานกับ การกำหนด Auto margins
เพื่อจัดรูปแบบ items นั้น สมมติเช่น เรามี รายการ 3 รายการ ดังนี้
<div class="d-flex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>
ปกติแล้ว โดยค่าเริ่มต้น items ทั้ง 3 จะเรียงติดกันซิดซ้าย หากเราต้องการให้รายการที่ 3 ชิดขวารายการเดียว เราสามรถกำหนด
โดยใช้ ml-auto หรือก็คือค่า margin-left:auto; ให้กับ items ที่ 3 ได้
<div class="d-flex"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="ml-auto">Flex item 3</div> </div>
เป็นลักษณะของการอาศัยพื้นว่าง(ถ้ามี) แล้วใช้ค่าพื้นที่ว่างเป็นค่าอัตโนมัติของการ margin เช่นเดียวกัน หากเราต้องการให้ เฉพาะ
items แรกชิดซ้าย items ที่เหลือชิดขวาหมด เราก็เปลี่ยนจาก ml เป้น mr แทน ให้กับ items แรก เป็น
<div class="d-flex"> <div class="mr-auto">Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>
demo
flex items 1
flex items 2
flex items 3
- item 1
- item 2
- item 3
เราสามารถประยุกต์คุณสมบัตินี้ ใช้งานกับ css class ที่ชื่อ flex-column หรือการจัดเรียงในแนวตั้ง เพื่อกำหนดให้ items ใดๆ ชิดขอบ
ด้านบน หรือด้านล่าง ตัวอย่างเช่น เรามีรายการเมนูในแนวตั้ง 3 รายกร เราต้องการให้เมนูสุดท้าย ซิดขอบด้านล่าง ส่วนเมนูที่เหลือ
ชิดขอบด้านบน ก็จะเป็นดังนี้
<div class="d-flex flex-column" style="height: 200px;"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="mt-auto">Flex item 3</div> </div>
เมื่อเราพิจารณาการใช้งานในแนวตั้ง ค่าการกำหนด margin จะเป็นค่า margin-top กับ margin-bottom หรือก็คือ mt-auto กับค่า
mb-auto ตามตำแหน่งที่จะใช้งาน
demo
flex items 1
flex items 2
flex items 3
- item 1
- item 2
- item 3
ทั้งหมดนี้เป็นแนวทางการใช้งาน flex ใน bootstrap ซึ่งถ้าได้ใช้งานบ่อยๆ เราจะเห็นภาพ และเข้าใจมากขึ้น ให้จำไว้เสมอว่า ถ้านึกถึง
flex ต้องมี container และ items เราต้องแยกให้ออกว่า ตัวไหนเป็น container และ ตัวไหนเป็น items หากมีการซ้อนกัน บาง items
ก็จะเป็นทั้ง items ของ container หลัก และเป็น container ของ items รองด้วย นั่นคือ items ที่เป็น container ย่อย ก็สามารถกำหนด
css class ของ contianer และ css class ของ items ได้
เนื้อหาที่เกี่ยวข้อง