Rows with Flexbox · 用 Flexbox 排成一行
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 此页面需较新浏览器（支持 SharedArrayBuffer）。请升级 Chrome、Edge、Firefox 或 Safari 至最新版本。
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.
中文
把盒子排成一行
- 默认情况下,盒子是往下叠的。但你常常想让它们并排。
- **Flexbox(弹性盒)**是做这件事最简单的办法。
- 把
display: flex;写在容器上 —— 也就是装着其他盒子的那个盒子 —— 它的子元素就会排成一行。
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.
中文
把它们分开
- 一旦一个盒子变成
display: flex;,你就能控制它的子元素怎么分布。 justify-content: space-between;把它们推开,中间留出空隙。gap: 12px;在每个子元素之间加上均匀的间距。
<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.
中文
常见错误
display: flex写在容器上,不是子项上。justify-content沿行方向分布子项。
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
中文
现在你来试试
display: flex写在容器上,不是写在每个小盒子上。- 先把一个盒子变成一行,再把它的子元素分开。
Explore · 探索
Flexbox lays out a row · Flexbox 排布一行
justify-content spaces items along the row; align-items across it. · justify-content 沿行排布项目;align-items 在交叉方向对齐。
Put the three boxes side by side. Add display: flex; to the .row rule. · 把三个盒子并排放。在 .row 规则里加上 display: flex;。
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · 把盒子在一行里均匀分开。在 .row 规则里加上 justify-content: space-between;。