CSSflex: 1 là shorthand của flex-grow: 1; flex-shrink: 1; flex-basis: 0%.
Điểm mấu chốt là flex-basis: 0%: trình duyệt coi kích thước khởi điểm của item là 0, rồi chia toàn bộ không gian còn lại theo tỉ lệ flex-grow. Kết quả là các item cùng flex: 1 có bề rộng bằng nhau bất kể nội dung dài ngắn.
flex: auto = 1 1 auto. Basis là auto nên item lấy kích thước nội dung làm mốc, phần dư mới đem chia. Item nội dung dài sẽ rộng hơn.
css
.equal > * { flex: 1; } /* 1 1 0% -> chia đều */
.natural > * { flex: auto; } /* 1 1 auto -> theo nội dung + chia phần dư */Các shorthand hay dùng khác: flex: none (0 0 auto, khoá cứng kích thước), flex: 0 0 240px (cột cố định 240px, không co không giãn).