Rows with Flexbox · Hàng với Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
Tiếng Việt
Đưa các box vào cùng một hàng
- Mặc định, các box xếp chồng xuống dưới. Thường thì bạn muốn chúng ngồi cạnh nhau.
- Flexbox là cách dễ dàng để làm điều đó.
- Đặt
display: flex;lên container (hộp chứa) — box chứa các box khác — và các con của nó sẽ xếp thành một hàng ngang.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
Tiếng Việt
Phân bổ khoảng cách giữa chúng
- Khi một box đã là
display: flex;, bạn có thể kiểm soát cách các con của nó phân tán. justify-content: space-between;đẩy chúng ra xa nhau, với các khoảng trống ở giữa.gap: 12px;thêm một khoảng cách đều đặn giữa mỗi con.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
Tiếng Việt
Lỗi thường gặp
display: flexđược đặt trên container, không phải trên các mục con.justify-contenttạo khoảng cách giữa các items dọc theo hàng.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
Tiếng Việt
Bây giờ bạn thử
display: flexđược đặt trên container, không phải trên các items.- Biến một box thành một hàng, sau đó phân tán các con của nó ra.
Explore · Khám phá
Flexbox lays out a row · Flexbox bố trí một hàng
justify-content spaces items along the row; align-items across it. · justify-content phân phối các mục dọc theo hàng; align-items ngang qua nó.
Put the three boxes side by side. Add display: flex; to the .row rule. · Đặt ba hộp cạnh nhau. Thêm display: flex; vào quy tắc .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · Phân bổ đều các hộp trên hàng. Thêm justify-content: space-between; vào quy tắc .row.