Hướng dẫn đầy đủ về CSS Flexbox

CSS flexbox là một one-dimensional(hay còn gọi là 1D) layout pattern, một trong những pattern giúp bạn dễ dàng thiết kế layout một cách linh hoạt và hiệu quả. Phân chia không gian giữa các items và kiểm soát căn chỉnh chúng trong container flex layout(vùng chứa). Với flexbox, chúng ta có thể dễ dàng sắp xếp các items từ trái sang phải, từ trên xuống dưới, đồng thời kiểm soát khoảng cách và thứ tự của các items trong container.

Làm thế nào để nó hoạt động?

Trước khi đi vào tìm hiểu sâu hơn về Flexbox, chúng ta cần nắm qua cấu trúc của Flexbox là như thế nào đã:

Trong flexbox thì chủ yếu có hai thành phần chính là: thùng chứa cha (flex container) và các phần tử con nằm bên trong (flex items).
Ngoài ra chúng ta cũng cần quan tâm tới một số thuộc tính sau:

• main start, main end, cross start, cross end: Điểu bắt đầu của container theo main axis được gọi là main start, điểm kết thúc của container theo main axis gọi là main end, với cross start và cross cũng tương tự nhưng dựa theo cross axis.
• main axis: Trục này chính là hướng của các item hiển thị, mặc định thì sẽ chạy từ trái qua phải.
• cross axis: Trục này vuông góc với main axis, chạy từ trên xuống dưới.
• main size: Là kích thước của mỗi item dựa theo trục main axis.
• cross size: Là kích thước của mỗi item dựa theo trục cross axis.

Các thuộc tính của flex container

Dưới đây là một số thuộc tính có thể sử dụng đối với flex container:

• display
• flex-direction
• flex-wrap
• flex-flow
• justified-content
• align-items
• align-content

Không sử dụng flexbox

Dùng display để áp dụng flexbox

Chúng ta cần phải sử dụng thuộc tính display. Đây là cách mà chúng ta định nghĩa một flex container, và cũng là việc bắt buộc nếu bạn làm việc với flexbox.

flex-direction

flex-direction dùng để chỉ định hướng hiển thì của các item, việc thay đổi hướng hiển thị flex cũng thể có thể cho phép ta thay đổi vị trí của các flex item.

flex-direction: row

flex-direction: row là giá trị mặc định khi sử dụng flexbox, không thực hiện bất kỳ thay đổi nào, chỉ đặt các item từ trái qua phải theo trục chính.

flex-direction: row-reverse

Giống với tên gọi, flex-direction: row-reverse ngược lại với row, các item sẽ được đặt từ phải qua trái.

flex-direction: column

Khi chúng ta xét flex-direction: column, lúc này trục chính sẽ đi từ trên xuống dưới vậy nên giờ đây các items sẽ được xếp chồng lên nhau.

flex-direction: column-reverse

Khi đó các items sẽ được xếp chống lên nhau nhưng theo chiều ngược lại. Hay để ý sẽ thấy ở ví dụ trên (1) sẽ ở trên cùng, nhưng khi sử dụng column-reverse (1) sẽ ở dưới cùng.

flex-wrap

flex-wrap dùng để kiểm soát việc bọc các items nằm gọn trong container. Nếu chúng ta giảm chiều rộng của trình duyệt, chúng ta có thể không nhìn thấy một số item trên cùng một dòng. Thuộc tính flex-wrap có thể giải quyết vấn đề đó:

• nowrap (mặc định): Không có gì thay đổi
• wrap: các items sẽ được bọc trọn trong container
• wrap-reverse

nowrap


wrap


wrap-reverse

flex-flow

flex-flow là cách viết rút gọn của flex-direction và flex-wrap. Trong flex-flow giá trị đầu tiên là flex-direction và thứ 2 là flex-wrap

justified-content

justified-content dùng để căn chỉnh vị trí của các items so với trục chính(main axis).
Có 6 giá trị có thể dùng đối với thuộc tính justified-content:

• flex-start: sẽ đặt item bắt đầu từ main start (và đây cũng là giá trị mặc định)
• flex-end:sẽ đặt item bắt đầu từ main end
• center: sẽ đặt tất cả item ở giữa trục main axis
• space-between: sẽ chia đều khoảng cách thừa và thêm nó vào giữa các item
• space-around: sẽ chia khoảng cách ở đầu và cuối. Khoảng cách ở đầu và cuối sẽ bằng 1 nửa khoảng cách ở giữa 2 item với nhau
• space-evenly: sẽ chia khoảng cách đều khoảng cách giữa các item với item, item và main start, item với main end bằng nhau