Bootstrap 4 Flex
Bootstrap 4 Flex
ใช้คลาส flex เพื่อควบคุมเลย์เอาต์ของส่วนประกอบ Bootstrap 4
Flexbox
ความแตกต่างที่ใหญ่ที่สุดระหว่าง Bootstrap 3 และ Bootstrap 4 คือตอนนี้ Bootstrap 4 ใช้ flexbox แทน float เพื่อจัดการเลย์เอาต์
โมดูลเลย์เอาต์กล่องแบบยืดหยุ่นช่วยให้ออกแบบโครงสร้างเลย์เอาต์ที่ตอบสนองที่ยืดหยุ่นได้ง่ายขึ้นโดยไม่ต้องใช้ทุ่นหรือการวางตำแหน่ง หากคุณเพิ่งเริ่มใช้ flex คุณสามารถอ่านเกี่ยวกับCSS Flexbox Tutorialของเรา
หมายเหตุ:ไม่รองรับ Flexbox ใน IE9 และเวอร์ชันก่อนหน้า
หากคุณต้องการการสนับสนุน IE8-9 ให้ใช้Bootstrap 3ซึ่งเป็นเวอร์ชันที่เสถียรที่สุดของ Bootstrap และยังคงได้รับการสนับสนุนจากทีมงานสำหรับการแก้ไขจุดบกพร่องที่สำคัญและการเปลี่ยนแปลงเอกสาร อย่างไรก็ตาม จะไม่มีการเพิ่มคุณสมบัติใหม่เข้าไป
ในการสร้างคอนเทนเนอร์ flexbox และแปลงชายด์โดยตรงเป็นไอเท็ม flex ให้ใช้d-flexคลาส:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
ในการสร้างคอนเทนเนอร์ flexbox แบบอินไลน์ ให้ใช้d-inline-flexคลาส:
ตัวอย่าง
ตัวอย่าง
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
ทิศทางแนวนอน
ใช้.flex-rowเพื่อแสดงรายการดิ้นในแนวนอน (เคียงข้างกัน) นี่เป็นค่าเริ่มต้น
เคล็ดลับ:ใช้.flex-row-reverse
เพื่อจัดแนวทิศทางแนวนอนให้ชิดขวา:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
ทิศทางแนวตั้ง
ใช้.flex-columnเพื่อแสดงรายการงอในแนวตั้ง (ทับกัน) หรือ.flex-column-reverse
เพื่อย้อนกลับทิศทางแนวตั้ง:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
ปรับเนื้อหา
ใช้.justify-content-*ชั้นเรียนเพื่อเปลี่ยนการจัดตำแหน่งของรายการแบบยืดหยุ่น คลาสที่ถูกต้องคือstart(ค่าเริ่มต้น), end, center, betweenหรือaround:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex justify-content-start">...</div>
<div class="d-flex
justify-content-end">...</div>
<div class="d-flex
justify-content-center">...</div>
<div class="d-flex
justify-content-between">...</div>
<div class="d-flex
justify-content-around">...</div>
เติม / ความกว้างเท่ากัน
ใช้.flex-fillกับสินค้าแบบยืดหยุ่นเพื่อบังคับให้มีความกว้างเท่ากัน:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
เติบโต
ใช้.flex-grow-1กับสินค้าแบบยืดหยุ่นเพื่อใช้พื้นที่ที่เหลือ ในตัวอย่างด้านล่าง รายการ flex สองรายการแรกใช้พื้นที่ที่จำเป็น ในขณะที่รายการสุดท้ายใช้พื้นที่ที่เหลือ:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
เคล็ดลับ:ใช้.flex-shrink-1กับสินค้าแบบยืดหยุ่นเพื่อย่อให้เล็กลงหากจำเป็น
คำสั่ง
เปลี่ยนลำดับภาพของรายการ flex เฉพาะกับ.orderคลาส คลาสที่ถูกต้องคือตั้งแต่ 0 ถึง 12 โดยที่จำนวนต่ำสุดมีลำดับความสำคัญสูงสุด (ลำดับที่ 1 แสดงก่อนลำดับที่ 2 เป็นต้น):
ตัวอย่าง
ตัวอย่าง
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
ระยะขอบอัตโนมัติ
เพิ่มระยะขอบอัตโนมัติเพื่อยืดหยุ่นรายการด้วย.mr-auto(ดันรายการไปทางขวา) หรือโดยการใช้.ml-auto(ดันรายการไปทางซ้าย):
ตัวอย่าง
ตัวอย่าง
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
ห่อ
ควบคุมวิธีที่รายการ flex ห่อในคอนเทนเนอร์ flex ด้วย.flex-nowrap(ค่าเริ่มต้น) .flex-wrapหรือ.flex-wrap-reverse.
คลิกที่ปุ่มด้านล่างเพื่อดูความแตกต่างระหว่างสามคลาส โดยเปลี่ยนการตัดรายการ flex ในกล่องตัวอย่าง:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
จัดเนื้อหา
ควบคุมการจัดแนวแนวตั้งของ รายการ flex ที่ รวบรวมไว้กับ.align-content-*
คลาส คลาสที่ถูกต้องคือ.align-content-start(ค่าเริ่มต้น), .align-content-end, .align-content-center, .align-content-between, .align-content-aroundและ.align-content-stretch.
หมายเหตุ:คลาสเหล่านี้ไม่มีผลกับรายการ flex แถวเดียว
ตัวอย่าง
ตัวอย่าง
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
จัดรายการ
ควบคุมการจัดแนวแนวตั้งของรายการ flex แถวเดียว.align-items-* ด้วย
คลาส คลาสที่ถูกต้องคือ.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, และ.align-items-stretch
(ค่าเริ่มต้น)
คลิกที่ปุ่มด้านล่างเพื่อดูความแตกต่างระหว่างห้าคลาส:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex align-items-start">..</div>
<div class="d-flex
align-items-end">..</div>
<div class="d-flex
align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex
align-items-stretch">..</div>
จัดตัวเอง
ควบคุมการจัดแนวตามแนวตั้งของรายการ flex ที่ระบุด้วย.align-self-*
คลาส คลาสที่ถูกต้องคือ.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, และ.align-self-stretch
(ค่าเริ่มต้น)
คลิกที่ปุ่มด้านล่างเพื่อดูความแตกต่างระหว่างห้าคลาส:
ตัวอย่าง
ตัวอย่าง
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
คลาส Flex ที่ตอบสนอง
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |