Flexbox sẽ giải quyết nhiều vấn đề khó khăn trong CSS thuần (như căn chỉnh thứ tự, chiều dọc, chiều ngang). Trong bài học này mình sẽ giới thiệu và hướng dẫn các bạn sử dụng Flexbox.

Flexbox là kiểu dàn trang mà nó sẽ tự cân đối kích thước của các phần tử bên trong, không cần thiết lập kích thước, không cần float, chỉ cần thiết lập thứ tự, chiều ngang hay dọc, các phần tử sẽ hiển thị theo ý muốn của bạn !

Mở đầu với Flexbox

Trước tiên chúng ta viết một đoạn html theo cấu trúc Flexbox,

và một đoạn css để ví dụ thêm sinh động.

Chạy lên sẽ như hình :

Để áp dụng được tất cả các dạng của Flexbox thì khối bao ngoài phải có thuộc tính css display:flex. Chúng ta thêm thuộc tính đó cho class container chạy lên sẽ như hình :

Đoạn html và css trên sẽ là mặc định áp dụng cho toàn bộ ví dụ bên dưới.

Bắt đầu với Flexbox

1.Flex-direction

Flex-direction có 4 dạng như sau:
flex-direction: row | column | row-reverse | column-reverse
– row: các thành phần nằm theo chiều ngang từ trái sang, nghĩa là hiển thị theo hàng.

– row-reverse: các thành phần nằm theo chiều ngang từ phải sang, nghĩa là hiển thị theo hàng nhưng đảo ngược vị trí các item.

– colum: các thành phần nằm theo chiều dọc từ trên xuống dưới, nghĩa là hiển thị theo cột.

– column-reverse: các thành phần nằm theo chiều dọc từ dưới lên trên, nghĩa là hiển thị theo cột nhưng đảo ngược vị trí các item.

Các bạn thêm lần lượt 4 thuộc tính flex-direction trên vào class container sẽ thấy kết quả.

2.Flex-wrap

Bây giờ chúng ta quay lại đoạn html và css mặc định ban đầu, và thêm width:500px cho các item.

Các bạn thấy 4 item có width:500px tổng là 2000px tại sao nó không chèn ra ngoài ??? Bởi vì thuộc tính display:flex ở container bọc bên ngoài đã căn đều các thành phần bên trong theo width:1000px của nó.

Bây giờ các bạn thêm thuộc tính flex-wrap:wrap vào class container sẽ được như hình sau:

thuộc tính này cho phép container bọc các item bên trong theo chiều dọc, và nếu các bạn xét width:2000px cho các item thì nó vẫn ko vượt quá 1000px của container như ở trên mình đã nói.

3.Order

Các bạn hãy nhìn lại đoạn HTML ban đầu của mình có thứ tự của mỗi phần tử là 1, 2, 3, 4 với class là item1, item2, item3, item4. Mặc định các item sẽ hiển thị theo thứ tự từ trên xuống dưới trong HTML là 1-2-3-4, nhưng với thuộc tính order chúng ta có thể sắp xếp lại vị trí các item.
Các bạn thêm css cho 4 item như sau:

sẽ được như hình sau:

Các bạn thấy đó item1 là số 1 đã nằm ở vị trí số 2, item2 là số 2 đã nằm ở vị trí số 3, item3 là số 3 đã nằm ở vị trí số 4, item4 là số 4 đã nằm ở vị trí số 1.
Chú ý: Nếu bạn chỉnh lại theo thuộc tính flex-direction thì vẫn có tác dụng nhé !

4.Justify Content

Thuộc tính justify-content hoạt động theo trục chính.
Mặc định các item bên trong sẽ rải đều bắt đầu từ main start đến main end, tuy nhiên nếu container vẫn còn khoảng trống thì có thể dùng thuộc tính justify-content để điều chỉnh lại vị trí của các item bên trong.
Justify Content có 5 dạng như sau:
justify-content: flex-start | flex-end | center | space-between | space-around
– flex-start: các thành phần bắt đầu từ trái sang.

– flex-end: các thành phần bắt đầu từ phải sang.

– center: các thành phần bắt đầu từ giữa.

– space-between: các thành phần căn cách đều nhau, không bao gồm khoảng cách giữa ô vuông đầu và cuối với container.

– space-around: các thành phần căn cách đều nhau ở cả hai bên, nghĩa là khoảng cách giữa thành phần ngoài cùng phía đầu và cuối với container sẽ bằng một nửa khoảng cách giữa các thành phần với nhau.

Các bạn thêm lần lượt 5 thuộc tính justify-content trên vào class container sẽ thấy kết quả.
Chú ý: thuộc tính justify-content hoạt động theo trục chính, và flex-direction làm thay đổi trục chính nhé !

5.Align-items

Thuộc tính align-items hoạt động với trục dọc.
Bạn xét height:200px cho container, và xét width:50px cho các item.
Align-items có 4 dạng như sau:
align-items: flex-start | flex-end | center | stretch
– flex-start: các thành phần bắt đầu từ đỉnh của container.

– flex-end: các thành phần bắt đầu từ đáy của container.

– center: các thành phần bắt đầu từ giữa của container.

– stretch: các thành phần cao bằng chiều cao của container.

Các bạn thêm lần lượt 4 thuộc tính align-items trên vào class container sẽ thấy kết quả.

Như vậy mình đã giới thiệu và hướng dẫn các bạn sử dụng Flexbox, một tính năng rất hữu ích trong css.
Nếu các bạn có gì thắc mắc hãy để lại comment bên dưới, mình sẽ giải đáp sớm nhất có thể.Cảm ơn các bạn, hẹn các bạn ở những bài hướng dẫn tiếp theo trong danh sách các bài học Css cơ bản, Css3.