CSS

Trước khi tìm hiểu về flexbox layout, bạn cần biết trong css có 4 kiểu layouts:

• Block: Dùng cho các khối trên website
• Inline: Dùng cho text
• Table: Dùng cho các bảng dữ liệu 2 chiều
• Positioned: Dùng cho các khối có vị trí rõ ràng

Bạn có thể thiết kế layout bằng các thuộc tính float hay position. Tuy nhiên với cách đó bạn sẽ tốn nhiều thời gian hơn và nếu xử lý không tốt layout sẽ bị vỡ không như mong đợi. Để xử lý vấn đề đó, bạn có thể sử dụng flexbox trong css. Bài viết này mình sẽ hướng dẫn các bạn chi tiết về cách sử dụng flexbox trong thiết layout cho website.

Các trình duyệt hỗ trợ flexbox

Hiện tại, flexbox css chỉ hoạt động trên các trình duyệt và phiên bản như sau:

Sử dụng flexbox trong thiết kế layout

• Sử dụng flex-container

See the Pen Flexbox by datcx (@datcx) on CodePen.0

• flex-container có các thuộc tính sau: flex-direction, flex-wrap, flex-flow, justify-content, align-item, align-content

Bây giờ chúng ta sẽ đi tìm hiểu từng thuộc tính ở trên

• flex-direction: cái này sẽ bố trí các item bên trong flex theo ý bạn mong muốn. Ví dụ như cùng nằm trên 1 hàng hoặc nằm trên các hàng khác nhau. Các giá trị của flex-direction là column (trên nhiều hàng), column-reverse(trên nhiều hàng những sắp xếp ngược lại), row (trên 1 hàng), row-reverse (trên 1 hàng nhưng sắp xếp ngược lại)

See the Pen KrKEoX by datcx (@datcx) on CodePen.0

• flex-wrap: cái này sẽ xác định các item bên trong được bao bọc theo cách nào. Xem ví dụ bên dưới

See the Pen QJNKrG by datcx (@datcx) on CodePen.0

• flex-flow: cái này dạng rút gọn, thay thế cho flex-direction và flex-wrap. Ví dụ flex-flow: row nowrap;
• justify-content: cái này là căn chỉnh vị trí của item (trái, phải,…). Xem ví dụ bên dưới

See the Pen VVaKoo by datcx (@datcx) on CodePen.0

• align-items: gần giống với justify-content nhưng căn trên và dưới. Xem ví dụ bên dưới

See the Pen jQqVyY by datcx (@datcx) on CodePen.0