CSSBa thuộc tính này trả lời ba câu hỏi khác nhau về một flex item:
css
.item {
flex-grow: 0; /* còn thừa chỗ thì có giãn ra không, và giãn theo tỉ lệ nào */
flex-shrink: 1; /* thiếu chỗ thì có co lại không, co theo tỉ lệ nào */
flex-basis: auto; /* kích thước KHỞI ĐIỂM trước khi giãn/co */
}
/* shorthand: grow shrink basis */
.sidebar { flex: 0 0 280px; } /* cố định 280px, không giãn không co */
.main { flex: 1 1 0; } /* chia đều phần còn lại, bỏ qua nội dung */
.auto { flex: 1 1 auto; } /* chia phần còn lại nhưng vẫn tính nội dung */Hiểu flex: 1 vs flex: auto — chỗ hay nhầm nhất:
| Viết tắt | Đầy đủ | Kết quả với 2 item nội dung dài ngắn khác nhau |
|---|---|---|
flex: 1 | 1 1 0 | hai item bằng nhau (basis 0, chia đều tất cả) |
flex: auto | 1 1 auto | item nội dung dài rộng hơn |
flex: none | 0 0 auto | không co không giãn |
Lưu ý: flex-basis thắng width khi cả hai cùng đặt. Đặt width: 200px; flex: 1 thì flex-basis: 0 sẽ vô hiệu hoá width — nhiều người sửa width mãi mà không thấy đổi vì lý do này.