💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSS Flexboxで横並びにする方法｜display flex
📌
結論
display: flex で子要素を横並びにできます
📝 実際のコードはこちら
.container { display: flex; }主なプロパティ
| プロパティ | 効果 |
|---|---|
justify-content | 主軸（横）の配置 |
align-items | 交差軸（縦）の配置 |
gap | 子要素間の間隔 |
flex-direction | 並ぶ方向（row/column） |
いつFlexboxを使う？
| 用途 | Flexbox or Grid |
|---|---|
| ナビメニューの横並び | Flexbox ✅ |
| ヘッダーの左右配置 | Flexbox ✅ |
| カード3列レイアウト | Grid ✅ |
| ダッシュボード | Grid ✅ |
まとめ
・display: flex で子要素が横並び
・justify-content と align-items で位置を制御
・1次元レイアウトの王道
演習で試してみよう
3つのdivをFlexboxで横並びにしてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
3つのdivをFlexboxで横並びにしてください。
詰まったらヒント
親に display: flex;