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:
| Chrome | IE | Firefox | Safari | Opera |
| 29.0 | 11 | 22.0 | 10 | 48 |
Sử dụng flexbox trong thiết kế layout
- Sử dụng flex-container
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EOxMod” default_tab=”css,result” user=”datcx”]See the Pen <a href=’https://codepen.io/datcx/pen/EOxMod/’>Flexbox</a> by datcx (<a href=’https://codepen.io/datcx’>@datcx</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
- 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)
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KrKEoX” default_tab=”css,result” user=”datcx”]See the Pen <a href=’https://codepen.io/datcx/pen/KrKEoX/’>KrKEoX</a> by datcx (<a href=’https://codepen.io/datcx’>@datcx</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
- 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
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QJNKrG” default_tab=”html,result” user=”datcx”]See the Pen <a href=’https://codepen.io/datcx/pen/QJNKrG/’>QJNKrG</a> by datcx (<a href=’https://codepen.io/datcx’>@datcx</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
- 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
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VVaKoo” default_tab=”html,result” user=”datcx”]See the Pen <a href=’https://codepen.io/datcx/pen/VVaKoo/’>VVaKoo</a> by datcx (<a href=’https://codepen.io/datcx’>@datcx</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
- 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
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jQqVyY” default_tab=”html,result” user=”datcx”]See the Pen <a href=’https://codepen.io/datcx/pen/jQqVyY/’>jQqVyY</a> by datcx (<a href=’https://codepen.io/datcx’>@datcx</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
