Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

CSS Flexbox: Hướng dẫn toàn tập cho người mới

CSS Flexbox Model cải tiến Box Model truyền thống. Vẫn có margin, padding, border, content nhưng thêm sự linh hoạt để các phần tử con (flex items) lấp đầy không gian container cha (flex container) một cách thông minh.

Code khởi tạo

.parent-container {
  height: 700px; width: 700px; background: green; padding: 20px;
  display: flex; /* Kích hoạt flexbox */
}
.child-item { height: 200px; width: 200px; padding: 20px; }

Mặc định (display:block) các child chồng lên nhau. Thêm display:flex cho parent → child nằm ngang hàng, margin mặc định = 0.

Thuộc tính Container (Flex Container)

flex-direction

Xác định trục chính (main axis):

  • row (mặc định): Trái → Phải. Cross axis: Trên → Dưới.
  • column: Trên → Dưới. Cross axis: Trái → Phải.
  • row-reverse, column-reverse: Đảo thứ tự.

Dùng row-reverse/column-reverse cho layout khác nhau giữa web/mobile.

flex-wrap

  • nowrap (mặc định): Child tràn ra ngoài container.
  • wrap: Tự xuống dòng khi hết chỗ.
  • wrap-reverse: Đảo chiều xuống dòng (dưới → trên).

flex-flow

Shorthand: flex-flow: column wrap = flex-direction: column; flex-wrap: wrap. Mặc định: row nowrap.

justify-content (Căn chỉnh trên Main Axis)

  • flex-start (mặc định): Cụm đầu.
  • flex-end: Cụm cuối.
  • center: Giữa.
  • space-between: Cách đều, đầu/cuối chạm mép.
  • space-around: Cách đều, khoảng trắng đôi ở đầu/cuối.
  • space-evenly: Khoảng trắng hoàn toàn đều.

align-items (Căn chỉnh trên Cross Axis)

  • stretch (mặc định): Kéo dãn child full chiều cao cross axis.
  • flex-start, flex-end, center, baseline.

Nếu child không có height cố định, stretch làm chúng cao bằng container. Set align-items khác để child tự co theo content.

Thuộc tính Child (Flex Item)

order

Thứ tự hiển thị (số nguyên). Mặc định 0. Âm lên trước, dương sau. Dùng cho responsive (đổi thứ tự mobile/web).

align-self

Ghi đè align-items cho child cụ thể. Giá trị: flex-start, flex-end, center, baseline, stretch. Chỉ hoạt động khi parent là display:flex.

Kết luận

Flexbox quản lý mối quan hệ parent-child. Parent dùng flex-direction, justify-content, align-items, flex-wrap điều khiển vị trí child. Child dùng order, align-self ghi đè. Thực hành nhiều để thành thạo!