Rows with 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
justify-content spaces items along the row; align-items across it.
Put the three boxes side by side. Add display: flex; to the .row rule.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule.