Huong dan day du ve CSS Flexbox: lam chu bo cuc linh hoat nam 2026

Ngày đăng 16 tháng 3, 202612 phút đọc

Hoc CSS Flexbox tu dau. Bao gom display flex, direction, wrap, justify, align, grow, shrink, basis va cac mau pho bien nhu can giua, navbar, luoi card va holy grail layout.

CSS Flexbox la gi va tai sao ban nen thanh thao no

CSS Flexbox la mo hinh bo cuc mot chieu duoc thiet ke de phan bo khong gian va can chinh cac phan tu trong mot container mot cach de du doan hon. No giai quyet nhieu van de CSS co dien ma truoc day thuong can den float, table hoac absolute positioning.

Flexbox dac biet huu ich khi ban can can giua theo chieu doc, chia deu khong gian, xu ly cac phan tu co kich thuoc thay doi, hoac xay dung component responsive ma khong can qua nhieu CSS.

Can giua de dang: khong can cac meo phuc tap nhu truoc day
Phan bo linh hoat: phan tu co the mo rong, thu nho va xuong dong
Tu duy theo truc: de hieu va de debug hon

Neu muon thu nghiem trong luc doc, hay mo Flexbox playground.

Flex container: display flex va truc chinh

Moi thu bat dau khi phan tu cha duoc gan display: flex. Khi do, tat ca con truc tiep se tro thanh flex item.

Mac dinh, cac item se xep theo hang ngang, khong xuong dong, bat dau tu dau truc chinh va duoc keo gian tren truc phu.

Gia tri	Truc chinh	Huong
`row`	Ngang	Trai sang phai
`row-reverse`	Ngang	Phai sang trai
`column`	Doc	Tren xuong duoi
`column-reverse`	Doc	Duoi len tren

flex-wrap dieu khien viec xuong dong. flex-flow la cach viet gon ket hop direction va wrap.

Thuoc tinh can chinh: justify-content va align-items

justify-content can chinh tren truc chinh, con align-items can chinh tren truc phu.

Thuoc tinh	Tac dung
`justify-content: center`	Can giua tren truc chinh
`space-between`	Chia deu khoang trong giua cac item
`align-items: center`	Can giua tren truc phu
`align-items: stretch`	Keo dai item theo truc phu

Khi co nhieu hang, align-content se dieu khien cach cac hang duoc sap xep. De tao khoang cach sach se giua cac item, gap la lua chon tot nhat.

Thuoc tinh cua flex item: grow, shrink va basis

Cac thuoc tinh nay quyet dinh moi phan tu su dung khong gian nhu the nao.

flex-grow: item duoc mo rong bao nhieu khi con du cho
flex-shrink: item se thu nho bao nhieu khi khong du cho
flex-basis: kich thuoc co so truoc khi phan bo lai

flex la dang viet tat cua ca ba. flex: 1 tao item linh hoat, flex: none giu kich thuoc co dinh, con flex: 0 0 250px tao item co kich thuoc 250px.

align-self cho phep mot item ghi de cach can chinh rieng, va order thay doi thu tu hien thi ma khong sua HTML.

Cac mau pho bien: can giua, navbar va sticky footer

Flexbox rat manh trong cac mau giao dien xuat hien lien tuc trong thuc te.

Can giua hoan hao: display: flex; justify-content: center; align-items: center;
Navbar: justify-content: space-between tach logo va menu
Sticky footer: wrapper dang cot voi min-height: 100vh va noi dung chinh dung flex: 1
Day item cuoi sang phai: margin-left: auto
Sidebar + content: sidebar co do rong co dinh, noi dung con lai linh hoat

Ban co the thu tat ca cac mau nay trong Flexbox playground.

Luoi card responsive va holy grail layout

Trong luoi card, mot mau pho bien la dat display: flex; flex-wrap: wrap; gap: 24px; cho container va flex: 1 1 300px; cho moi card. Cach nay giup card giu do rong toi thieu hop ly trong khi van tu dieu chinh theo man hinh.

Holy grail layout la cau truc kinh dien gom header, footer, sidebar trai, sidebar phai va noi dung chinh. Thuong se dung wrapper theo cot va khu vuc giua la mot flex container khac.

Wrapper ngoai: display: flex; flex-direction: column; min-height: 100vh;
Khu vuc giua: display: flex; flex: 1;
Sidebar: flex: 0 0 200px;
Noi dung chinh: flex: 1;

Flexbox va CSS Grid: khi nao nen dung cai nao

Flexbox phu hop voi bo cuc mot chieu. CSS Grid phu hop voi bo cuc hai chieu khi ban can kiem soat dong va cot cung luc.

Dung Flexbox cho navbar, card, form, button group va can chinh ben trong component
Dung Grid cho khung trang tong the va cac luoi phuc tap

Khia canh	Flexbox	Grid
So chieu	1D	2D
Diem manh	Can chinh va phan bo	Cau truc bo cuc
Ung dung pho bien	Component	Trang hoan chinh

Trong du an thuc te, hai cong cu nay thuong bo sung cho nhau. Ban co the so sanh chung trong Flexbox playground va CSS Grid generator.

Loi thuong gap va meo nang cao voi Flexbox

Nhung loi thuong thay khi dung Flexbox gom:

Quen rang flex-shrink mac dinh la 1
Dung width thay vi flex-basis
Khong dat min-width: 0 khi can cat ngan van ban
Co gang tao luoi 2 chieu phuc tap chi bang Flexbox

Mot vai meo huu ich:

margin-left: auto day mot item sang dau con lai
flex: 1 1 0% thuong cho ket qua chia deu hon
Flex container long nhau rat huu ich trong UI phuc tap
order chi doi thu tu hien thi, khong doi thu tu doc cho tro nang

De luyen tap va debug nhanh hon, hay dung interactive Flexbox playground.

Thử công cụ này:

Mở công cụ→

Câu hỏi thường gặp

Su khac nhau giua justify-content va align-items la gi?

justify-content can chinh theo truc chinh, con align-items can chinh theo truc phu. Trong row mac dinh, ban co the hieu don gian la justify-content quan ly ngang, align-items quan ly doc.

flex: 1 chinh xac lam gi?

flex: 1 thuong tuong duong voi flex-grow: 1, flex-shrink: 1 va flex-basis: 0%. Dieu nay giup item chia se khong gian con lai mot cach linh hoat va co the thu nho khi can.

Lam sao de can giua mot div ca ngang lan doc bang Flexbox?

Dat display: flex; justify-content: center; align-items: center; cho phan tu cha. Dong thoi can dam bao container co chieu cao ro rang, vi du min-height: 100vh.

Nen hoc Flexbox hay Grid truoc?

Nen hoc Flexbox truoc. No de tiep can hon va giai quyet rat nhieu van de bo cuc trong component. Sau do hoc Grid se de hon nhieu.

Tai sao flex item cua toi khong xuong dong?

Vi flex-wrap mac dinh la nowrap. Neu muon cac item tu xuong dong khi khong du cho, hay dat flex-wrap: wrap; cho container.

Toi co the dung ca Flexbox va CSS Grid trong cung mot du an khong?

Co. Day la cach lam rat pho bien. Grid rat tot cho bo cuc tong the cua trang, con Flexbox rat manh trong viec can chinh ben trong tung component.