Thực hành Flexbox!

Chào các ban!

Lời đầu tiên xin được gửi tới toàn thể anh chị em Đại gia đình F8 lời chúc mừng năm mới, lời chúc sức khỏe chân thành nhất! Chúc anh em năm mới gặt hái nhiều thành công!

Trong những ngày đầu năm rảnh rỗi, theo truyền thống các cụ để lại, gọi là Khai bút đầu xuân mình có viết một trang Web nhỏ tổng hợp kiến thức cơ bản về thuộc tính display flex. Xin được gửi tới các bạn tham khảo và có thể sử dụng để ôn luyện thêm về Flexbox.

Mình bảo đảm khi đọc hết bài này: Chỉ cần nhớ ba dòng, chắc chắn bạn thông thạo Flexbox!

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

Tất cả những gì nằm trong một thùng chứa flex đều là Children. (Chỉ chịu tác động từ Flex Parent trực tiếp)

Mỗi Flex child (flex items) đều có thể trở thành một Flex Parent riêng biệt, độc lập. (Nếu ta gán cho nó thuộc tính display: flex;)

Nhưng chú ý giữa chúng không có mối quan hệ ông, bà và cháu chắt nhé, chỉ có mối quan hệ tác động qua lại giữa cha mẹ và con cái. Khi nó trở thành một Flex Parent và nó sẽ nhận bất cứ thuộc tính nào của các thuộc tính có trong Flex Parent. Đây là mấu chốt vấn đề dẫn đến các bạn mới sự khó hiểu, khó nhớ và đôi khi nhầm lẫn dẫn tới "Tại sao cái này không hoạt động!!!???"

Trục cơ bản của FlexBox:

a. Trục Main axis: (Trục chính)

• Mặc định:*

  (Trục chính) được trải dài theo kích thước của Flex Parent từ Main start đến Main end. Điểm Main start nằm bên trái, điểm Main end nằm bên phải.

*b. Trục Cross axis: (Trục chéo)

Mặc định:*

(Trục chéo) được trải dài theo kích thước của Flex Parent từ Cross start đến Cross end.
Điểm Cross start nằm phía trên, điểm Cross end nằm phía dưới.

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.

Đây là Demo: https://youtu.be/VfAE0EtdsSs

flex-direction: (Tác động lên các trục flebox)

flex-direction: (Tác động lên việc phân bổ các flex-item)

flex-direction: row; (Giá trị row là mặc định)

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap:

flex-wrap: nowrap; (Giá trị nowrap là mặc định)

flex-wrap: wrap;

flex-wrap: wrap-reverse; Sẽ làm đảo chiều trục chéo Cross axis (Giá trị wrap-reverse; quyết định phương hướng của trục Cross axis).

justify-content:

Là thuộc tính flex Parent quyết định vị trí các flex children của nó luôn luôn dịch chuyển theo trục Main axis. (Hay nói một cách khác justify-content quyết định vị trí các flex children và phụ thuộc vào trục Main axis) <Như vậy bạn chỉ cần nắm chắc cách thức biến đổi linh hoạt của trục main axis bạn sẽ làm chủ được thuộc tính justify-content này> Mình phải nói kỹ chỗ này vì rất nhiều bạn rất hay nhầm lẫn dẫn tới "Tại sao cái này không hoạt động!!!"

justify-content[row]

justify-content[column]

align-items:

Quyết định vị trí và kích thước (Mặc định luôn giãn flex-item chiếm hết không gian của flex parent và xắp đặt flex-item theo Cross axis).

align-items[row]

align-items[column]

align-content:

Là thuộc tính quyết định vị trí của các hàng hoặc cột flex children theo trục Cross axis (Chỉ có hiệu lực khi flex children được phân bổ trên nhiều hàng hay nhiều cột) <Lưu ý việc nhần lẫn giữa align-content và align-items>

order:

Quyết định Thứ tự, vị trí cụ thể cho một hoặc các flex child. Theo trục Main axis

flex-grow:

Quyết định kích thước của flex child có được giãn ra hay không.

flex-shrink:

Quyết định kích thước của flex child có được co lại hay không.

flex-basis:

Thiết lập kích thước ban đầu cho flex children.

align-self:

Là thuộc tính flex item quyết định chính vị trí của item đó tách ra khỏi luồng. Theo trục Cross axis (Ghi đè các giá trị thuộc tính align-items của Flex Parent để đứng ở vị trí khác)

Hy vọng nhận được sự ủng hộ và góp ý của các bạn!

Đây là linh sản phẩm và Source Code, mình dùng GitHub free nên các bạn chịu khó đợi load tý nhé! https://xuanphao19.github.io/practice_flexbox/

Đến đây bạn đã tự tin khẳng định bản thân đã trở thành một Ninja flexbox chưa nào?

Nếu chưa thì cùng mình tiếp tục nhé, mình mách thêm một mẹo nhỏ: Giờ bạn hãy quên tất cả cái mớ hỗn độn, phức tạp phía trên đi và nhớ cho mình ba dòng sau:

- Mặc đinh: Main axis nằn ngang, Cross axis vuông góc, flex wrap reverse đảo chiều Cross axis.

- Justify-content: Phụ thuộc Main axis. align: Phụ thuộc Cross axis (align-items, align-content, align-self).

- basis ban đầu. grow giãn, shrink co, order gọi chỗ đứng, align-self: phá vỡ align-items.

Chúc các bạn sức khỏe và học tốt!