Mọi thuộc tính flexbox thường dùng, nhóm theo nơi áp dụng: container và item. Mỗi dòng ghép thuộc tính với các giá trị phổ biến và tác dụng của nó.
Flexbox bố trí phần tử theo một chiều: hàng hoặc cột. Đặt display: flex lên phần tử cha, nó trở thành flex container; các phần tử con trực tiếp trở thành flex item. Thuộc tính của container điều khiển sự phân bố dọc theo trục chính và trục chéo; thuộc tính của item điều khiển cách một item riêng lẻ giãn ra, co lại hay tự căn chỉnh. Hãy chọn flexbox cho các thanh, hàng và căn giữa theo một chiều.
Bảng tham chiếu · 13 mục
CSS FlexboxExplained
13 of 13 rows
Container
flex | inline-flex
Biến phần tử thành flex container.
row | column | row-reverse | column-reverse
Đặt trục chính mà các item chạy theo.
flex-start | center | space-between | space-around | space-evenly
Phân bố các item dọc theo trục chính.
stretch | center | flex-start | flex-end | baseline
Căn chỉnh các item dọc theo trục chéo.
flex-start | center | stretch | space-between
Căn chỉnh các hàng đã wrap khi còn khoảng trống trên trục chéo.
nowrap | wrap | wrap-reverse
Cho phép các item xuống hàng mới thay vì co lại.
0.5rem | 8px 16px
Khoảng trống giữa các item, theo chiều ngang và chiều dọc.
Item
0 | 1 | 2
Item hấp thụ bao nhiêu khoảng trống so với các phần tử cùng cấp.
0 | 1
Item co lại bao nhiêu khi không đủ chỗ.
auto | 200px | 50%
Kích thước khởi đầu trước khi chia phần khoảng trống còn dư.