Hướng dẫn flex 1 bootstrap

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Tổng quan về Bootstrap Flex

Trước khi tìm hiểu về Flex trong Bootstrap, tôi sẽ đưa ra một vài khái niệm sẽ được sử dụng trong bài viết này.

1. Một phần tử được áp dụng lớp .d-flex hoặc .d-inline-flex được gọi là "Flex Container" (Bộ chứa Flex).
2. Các phần tử con trực tiếp của "Flex Container" được gọi là các "Flex Item".

Về cơ bản Flex Container có thể thay đổi kích thước của nó, chẳng hạn khi kích thước của trình duyệt thay đổi. Khi đó các Flex Item sẽ lớn lên (Grow) hoặc thu nhỏ (Shrink) kích thước của chúng để phản ứng lại các thay đổi. Bootstrap đưa ra các lớp tiện ích Flex (Flex Utility Classes) giúp bạn điều khiển các hành vi của các Flex Item.

2- Flex Container

Một phần tử (element) được áp dụng một trong các lớp dưới đây sẽ được gọi là một Flex Container:

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Trước hết, bạn hãy xem một ví dụ để thấy sự khác biệt giữa 2 lớp .d-flex và .d-inline-flex:

d-flex-d-line-flex-example.html

   
      
      
      
   
   
      

         
.d-flex
         

            I'm a flexbox container!
         
         
.d-inline-flex
         

            I'm an inline flexbox container!
            .. .... .... ...... ...... .........
         
      
      
      
      
   

Same Row

Flex Container đặt các phần tử con trực tiếp của nó trên một hàng.

   
.d-flex
   

      
Item
      
LongItem
      
Item
      
VeryLongItem
      
Item
      
VeryVeryLongItem
   
   
.d-inline-flex
   

      
Item
      
LongItem
      
Item
      
VeryLongItem
      
Item
      
VeryVeryLongItem
   

Flex Item Height

Các phần tử con trực tiếp của một Flex Container sẽ có chiều cao giống nhau:

flex-item-height-example.html

   
.d-flex
   

      
Item
      
Long Item
      
Item
      
Very Long Item
      
Item
      
Very Very Long Item
   

   
.d-inline-flex
   

      
Item
      
Long Item
      
Item
      
Very Long Item
      
Item
      
Very Very Long Item
   

.d-(sm|md|lg|xl)-flex

Lớp (Class)	Mô tả
.d-sm-flex	.d-sm-flex giống với .d-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 567px.
.d-md-flex	.d-md-flex giống với .d-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 768px.
.d-lg-flex	.d-lg-flex giống với .d-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 992px.
.d-xl-flex	.d-xl-flex giống với .d-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 1200px.

.d-inline-(sm|md|lg|xl)-flex

Lớp (Class)	Mô tả
.d-sm-inline-flex	.d-sm-inline-flex giống với .d-inline-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 567px.
.d-md-inline-flex	.d-md-inline-flex giống với .d-inline-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 768px.
.d-lg-inline-flex	.d-lg-inline-flex giống với .d-inline-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 992px.
.d-xl-inline-flex	.d-xl-inline-flex giống với .d-inline-flex, nhưng nó chỉ hoạt động (có tác dụng) nếu phần tử cha có chiều rộng >= 1200px.

Bạn có thể sử dụng kết hợp các lớp .d-flex, .d-(sm|md|lg|xl)-flex, .d-inline-flex, .d-(sm|md|lg|xl)-inline-flex cho một phần tử. Chúng sẽ hoạt động một cách mềm dẻo dựa trên kích thước của màn hình.

   

      .d-inline-flex .d-sm-flex
   

   

      .d-flex .d-sm-inline-flex
   

3- Hướng của Flex (Flex Direction)

.flex-row, .flex-row-reserve

Mặc định Flex Container đặt các phần tử con trực tiếp của nó trên một dòng (row) theo hướng mặc định của trình duyệt (Thường là từ trái sang phải). Tuy nhiên bạn có thể sử dụng lớp .flex-row-reverse để đảo ngược hướng.

Lớp	Mô tả
.flex-row	(Mặc định). Các phần tử con được đặt trên 1 dòng, theo hướng mặc định của trình duyệt (Thường là từ trái sang phải).
.flex-row-reverse	Các phần tử con sẽ được đặt trên 1 dòng, theo hướng ngược lại với hướng mặc định của trình duyệt (Thường là từ phải sang trái).

.d-flex .flex-row-reverse

   
.d-flex .flex-row

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

   
.d-flex .flex-row-reverse

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

.flex-column, .flex-column-reverse

Mặc định Flex Container đặt các phần tử con của nó theo phương nằm ngang. Tuy nhiên nó sẽ đặt các phần tử con theo phương thẳng đứng nếu áp dụng lớp .flex-column hoặc .flex-column-reverse.

Lớp	Mô tả
.flex-column	Các phần tử con được đặt trên 1 cột, theo hướng mặc định của trình duyệt (Thường là từ trên xuông dưới).
.flex-column-reverse	Các phần tử con sẽ được đặt trên 1 cột, theo hướng ngược lại với hướng mặc định của trình duyệt (Thường là từ dưới lên trên).

.flex-column, .flex-column-reverse

   
.d-flex .flex-column

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

   
.d-flex .flex-column-reverse

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

Responsive Flex

Dưới đây là danh sách các lớp khác giúp thiết lập hướng (direction) cho Flex Container. Bạn có thể sử dụng kết hợp chúng để tạo được một thành phần giao diện tương thích với các thiết bị có độ rộng màn hình khác nhau.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Ví dụ: Áp dụng lớp .flex-sm-column cho một Flex Container, các phần tử con của Flex Container sẽ nằm trên một cột nếu chiều rộng của Flex Container >= 567px. Ngược lại .flex-sm-column sẽ không hoạt động, Flex Container sẽ đặt các phần tử con của nó trên 1 dòng.

4- Căn chỉnh nội dung (Justify content)

Một số lớp giúp bạn căn chỉnh (justify) vị trí các phần tử con của một Flex Container, về cơ bản có 5 cách căn chỉnh:

1. .justify-content-start
2. .justify-content-end
3. .justify-content-center
4. .justify-content-between
5. .justify-content-around

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

Dưới đây là danh sách đầy đủ các lớp giúp bạn căn chỉnh (justify) vị trí các phần tử con của Flex Container:

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

Example:

Và bây giờ là ví dụ. Tôi sử dụng .justify-content-sm-center, .justify-content-md-end áp dụng cho một Flex Container. Bạn có thể quan sát sự thay đổi vị trí các phần tử con của Flex Container khi chiều rộng của Flex Container thay đổi.

1. .justify-content-md-end hoạt động khi chiều rộng của Flex Container >= 768px.
2. .justify-content-sm-center hoạt động khi chiều rộng của Flex Container >= 567px.

   .d-flex
   .justify-content-sm-center
   .justify-content-md-end
   


   

      
Flex Item 1
      
Flex Item 2
      
Flex Item 3
   

5- Fill/ Equals Width

Sử dụng lớp .flex-fill áp dụng cho các phần tử con trực tiếp của Flex Container sẽ giúp các phần tử này có chiều rộng bằng nhau, và lấp đầy chiều rộng của Flex Container (Xem hình minh họa).

.flex-fill

   
Flex Item 1
   
Flex Item 2
   
Flex Item 3

Một số lớp khác:

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill

Ví dụ dưới đây chúng ta sử dụng lớp .flex-sm-fill áp dụng cho các phần tử con trực tiếp của Flex Container. Chúng sẽ có chiều rộng bằng nhau và lấp đầy chiều rộng của Flex Container nếu chiều rộng của Flex Container >= 567px.

   
Flex Item 1
   
Flex Item 2
   
Flex Item 3

6- Lớn lên và co lại (Grow & shrink)

Grow

Lớp .flex-grow-1 được sử dụng để áp dụng cho Flex-Item giúp cho phần tử này tăng (grow) kích thước của nó lấp đầy khoảng không gian sẵn có. Ngược lại, nếu áp dụng lớp .flex-grow-0 cho Flex-Item sẽ làm cho phần tử này sẽ trở về trạng thái thông thường.

flex-grow-example

   
Flex Item (.flex-grow-1)
   
Flex Item
   
Flex Item

Một số lớp tương tự, áp dụng trong tình huống "Responsive":

• .flex-grow-0
• .flex-grow-1
• .flex-sm-grow-0
• .flex-sm-grow-1
• .flex-md-grow-0
• .flex-md-grow-1
• .flex-lg-grow-0
• .flex-lg-grow-1
• .flex-xl-grow-0
• .flex-xl-grow-1

Keywork	Mô tả
.flex-sm-grow-*	Lớp này áp dụng cho Flex-Item, nó có tác dụng khi chiều rộng của Flex Container >= 567px.
.flex-md-grow-*	Lớp này áp dụng cho Flex-Item, nó có tác dụng khi chiều rộng của Flex Container >= 768px.
.flex-lg-grow-*	Lớp này áp dụng cho Flex-Item, nó có tác dụng khi chiều rộng của Flex Container >= 992px.
.flex-xl-grow-*	Lớp này áp dụng cho Flex-Item, nó có tác dụng khi chiều rộng của Flex Container >= 1200px.

Dưới đây là một ví dụ Responsive, Một Flex Container với 3 Flex Item. Bạn sẽ thấy sự thay đổi của chúng khi chiều rộng của Flex Container >= 567px và khi chiều rộng của Flex Container < 567px.

flex-grow-responsive-example

Responsive (.flex-sm-grow-0 .flex-grow-1)


   
(.flex-sm-grow-0 .flex-grow-1)
   
Flex Item
   
Flex Item

Shrink

7- Lề tự động (Auto Margin)

Các lớp .mr-auto, .ml-auto (Margin right auto, Margin left auto) cũng được sử dụng cho các Flex Item để tạo ra lề (margin) bên phải và bên trái tự động.

Dưới đây là ví dụ sử dụng lớp .mr-auto, .ml-auto:

margin-auto-example

Margin Auto (.mr-auto, .ml-auto)


   
Flex Item (.mr-auto)
   
Flex Item
   
Flex Item



   
Flex Item
   
Flex Item (.mr-auto)
   
Flex Item



   
Flex Item
   
Flex Item
   
Flex Item (.ml-auto)



   
Flex Item (.mr-auto)
   
Flex Item
   
Flex Item (.ml-auto)

8- Wrap .flex-wrap, .flex-nowrap

Thông thường các Flex Container sẽ đặt các Flex Item trên một hàng, kể cả khi chiều rộng của nó quá nhỏ, giống như hình minh họa dưới đây:

Sử dụng lớp .flex-wrap áp dụng cho Flex Container bạn có thể thay đổi hành vi của nó, khi chiều rộng của Flex Container nhỏ đi, các Flex Item có thể bị đẩy xuống các dòng dưới.

flex-wrap-example

.d-flex .flex-wrap



   
Item
   
LongItem
   
Item
   
VeryLongItem
   
Item
   
VeryVeryLongItem

.flex-wrap-reverse

flex-wrap-reverse-example

.d-flex .flex-wrap


   
Flex Item 1
   
Flex Item 2
   
Flex Item 3
   
Flex Item 4
   
Flex Item 5



.d-flex .flex-wrap-reverse


   
Flex Item 1
   
Flex Item 2
   
Flex Item 3
   
Flex Item 4
   
Flex Item 5

.flex-nowrap

Áp dụng lớp .flex-nowrap cho Flex Container làm cho các Flex Item luôn nằm trên một hàng (Đây là hành vi mặc định của Flex Container). Đôi khi bạn cần sử dụng nó trong tình huống "Responsive".

Responsive:

Một số lớp tương tự, áp dụng trong các tình huống "Responsive":

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

9- Thứ tự (Order)

Bootstrap cung cấp một vài lớp để áp dụng cho các Flex Item giúp chỉ định thứ tự hiển thị của chúng. Các lớp này là .order-1, .order-2, ... , .order-12.

order-example

Order (.order-*)


   
Flex Item 1 (.order-2)
   
Flex Item 2 (.order-1)
   
Flex Item 3 (.order-3)

Các lớp khác, sử dụng trong tình huống "Responsive":

• .order-*
• .order-sm-*
• .order-md-*
• .order-lg-*
• .order-xl-*

* = 1, 2, ... 12

order-responsive-example

Order Responsive


   
(.order-2 .order-sm-3)
   
(.order-1 .order-sm-2)
   
(.order-3 .order-sm-1)