Hỗ trợ thực hành FlexBox

learnGeneral

What is CSS Flex?

The flex property sets the flexible length on flexible items.

Cấu trúc và phương thức hoạt động của FlexBox:

Các flex-item được phân phối dọc theo các trục Main Axis và Cross Axis chạy vuông góc với nhau, điều này phụ thuộc vào property flex-direction, vị trí layout thay đổi giữa các hàng và cột dựa theo các trục.

Cấu trúc:

Gồm các parent class và các children class
Phương thức hoạt động:

Thuộc tính linh hoạt sẽ phát triển hoặc thu nhỏ các children class để phù hợp với không gian có sẵn của parent class. flex

Khi làm việc với flexbox, Mọi đặc tính hoạt động của flexbox đều liên quan đến các trục Main Axis và Cross Axis. Vì vậy, bạn cần phải nắm chắc và hiểu rõ cách chúng hoạt động trước khi bắt đầu.

Flexbox Chart

Thuộc tính và giá trị CSS Flex?

Biểu đồ thuộc tính và giá trị thông dụng, cơ bản nhất để làm việc với flexbox.

Flex property of parent class:

Parent class là hộp chứa flex được tạo bởi một phần tử có hiển thị được tính toán là flex hoặc inline-flex .

display:
- flex: Parent class linh hoạt ở cấp độ khối
- inline-flex: Parent class linh hoạt ở cấp độ nội tuyến
flex-direction:
- row (mặc định) : Main axis nằm ngang, flex-item xếp từ trái qua phải
- row-reverse: Main axis nằm ngang, flex-item xếp từ phải qua trái
- column: Main axis thẳng đứng, flex-item xếp từ trên xuống
- column-reverse: Main axis thẳng đứng, flex-item xếp từ dưới lên
align-items: Điều khiển flex-item theo hướng vuông góc với Main axis
- stretch (mặc định): flex-item kích thước giãn rộng tối đa (bằng với chiều cao hàng hoặc chiều rộng cột) theo hướng VUÔNG GÓC với Main axis
- baseline: Kích thước các flex-item CO LẠI bám theo đường baseline
- center: Kích thước các flex-item CO LẠI giữa hàng (cột)
- space-around: Không gian thừa theo Main axis chia đều cho khoảng cách các phần tử
- space-between: Không gian thừa theo Main axis chia đều cho khoảng cách các phần tử (phần tử đầu và cuối sát mép khung)
justify-content:
- flex-start (mặc định): Đẩy các flex-item về Main start
- flex-end: Đẩy các flex-item về Main end
- center: Đẩy các flex-item theo Main axis
- space-around: Chia đều khoảng cách xung quanh flex-item
- space-between: Chia đều khoảng cách giữa các flex-item (flex-item đầu và cuối sát mép khung)

flex-wrap:
- nowrap (mặc định): flex-item Không xuống dòng
- wrap: flex-item Xuống dòng không đảo chiều.
- wrap-reverse: flex-item Xuống dòng và đảo chiều
align-content: Điều khiển các dòng trong khung. Chỉ có hiệu lực khi có nhiều dòng
- stretch (mặc định): Các dòng kéo dài để chiếm không gian còn lại
- center: Căn giữa các dòng được
- flex-start: Đẩy các dòng về phía đầu của Parent
- flex-end: Đẩy các dòng về phía cuối của Parent
- space-between: Các dòng được phân bổ đều trong Parent flex
- space-around: Các dòng được phân bổ đều trong Parent, với khoảng cách bằng một nửa kích thước ở hai đầu
- space-evenly: Các dòng được phân bổ đều trong Parent, với khoảng cách bằng nhau xung quanh chúng
gap: Xác định khoảng cách giữa các hàng và giữa các cột trong bố cục flexbox, lưới hoặc nhiều cột.
- row-gap: Nhận giá trị là đơn vị khoảng cách
- column-gap: Nhận giá trị là đơn vị khoảng cách
flex-flow: Cú pháp shorthand của hai thuộc tính flex-direction và flex-wrap trong bố cục flexbox.
- flex-direction:
- flex-wrap: cách

Flex property of children class:

Các flex-item hay nói một cách khác là (các mục linh hoạt) của một thùng chứa linh hoạt.
Mỗi flex-item trong luồng của một bộ chứa flex trở thành một mục flex.

order

Nhận giá trị là số; Chỉ định thứ tự vị trí hiển thị của flex-item. Theo mặc định, các flex-item được hiển thị theo cùng thứ tự với thứ tự viết code của bạn. Sử dụng thuộc tính order để thay đổi thứ tự các flex-item của bạn.
flex-grow

Nhận giá trị là số; Chỉ định flex-item chiếm bao nhiêu phần, của khoảng không gian còn lại của một thùng chứa linh hoạt, theo hướng chính.
flex-shrink

Nhận giá trị là số; Chỉ định flex-item có thể co lại bao nhiêu phần khi cần thiết
flex-basis

Nhận giá trị là số; Chỉ định chiều dài khởi tạo cho flex-item trong hệ thống flex
flex

Thuộc tính này là cú pháp viết tắt cả ba thuộc tính flex-grow, flex-shrink, flex-basic trên một dòng
align-self: Căn chỉnh một phần tử trong hệ thống flex
- stretch: Phần tử được định vị để phù hợp với vùng chứa
- center: Phần tử được định vị ở trung tâm của vùng chứa
- flex-start: Phần tử được định vị ở đầu vùng chứa
- flex-end: Phần tử được định vị ở cuối vùng chứa
- baseline: Phần tử được định vị tại đường cơ sở của vùng chứa
- Lưu ý: Thuộc tính align-self ghi đè các thuộc tính align-items trong flex Parent (Trên chính nó).