(Sample)
「写真とテキストを横に並べたいけど、floatはちょっと古いって聞いた…」
そんなあなたにぴったりなのがFlexbox（フレックスボックス）です。
今回は、Flexboxを使って写真と文字を横に並べる方法を、丁寧にかつ実践的に解説します！
Flexboxってなに？
要素の並び方を「柔軟（flexible）」にするためのレイアウト方法
従来のfloatやinline-blockでは難しかった、中央揃えや余白の均等配置が、Flexboxなら簡単にできてしまいます！
たとえるなら、Flexboxは「要素を自由自在に並べられるレゴブロックのような仕組み」です。
今回のコードのポイントはここ！
あなたのHTMLでは、次のようなレイアウトを作っています：
- 画面が広いとき：写真1：テキスト2の比率で横並び
- 画面が狭いとき：縦並びに切り替わるレスポンシブ対応
この構成は、Flexboxのflex-wrap: wrapとメディアクエリによって実現されています。
コードを分解してやさしく解説
Flexboxの設定部分
.container {
display: flex;
flex-wrap: wrap;
}
display: flex→ Flexboxレイアウトを有効化flex-wrap: wrap→ 要素が入りきらないときに自動で折り返す
これにより、スマホなどの狭い画面でも無理やり横並びにせず、縦に整列してくれるようになります。
子要素の幅を調整
.image-column,
.text-column {
flex: 1 1 100%;
}
flex: 1 1 100%とは、「基本幅100%、必要なら縮んでもよいよ」の意味- スマホなど狭い画面では、写真とテキストが上下に並ぶ
横並びに切り替えるメディアクエリ
@media (min-width: 768px) {
.image-column {
flex: 0 0 33.33%;
}
.text-column {
flex: 0 0 66.67%;
}
}
- 画面幅が768px以上のときに、
- 写真：横幅の33.33%
- テキスト：横幅の66.67%
flex: 0 0 ○%で幅の固定＋伸縮しないという設定になります
floatとの違いは何？
| 比較項目 | float | Flexbox |
|---|---|---|
| 横並びのしやすさ | △ 明示的に幅指定が必要 | ◎ 柔軟に設定できる |
| 中央揃え | × 難しい | ◎ らくらく |
| レスポンシブ対応 | △ 工夫が必要 | ◎ wrapですぐ対応 |
| 並び順の変更 | × HTML順に依存 | ◎ CSSだけで変更可能（order） |
たとえば、スマホではテキストを先に、PCでは写真を先に、などデバイスに応じて順番を変えることもFlexboxなら可能です。
よくある失敗とその対策
| よくあるミス | 原因 | 対策 |
|---|---|---|
| 要素がはみ出す | flexの幅指定ミス | flex-wrap: wrap を必ず指定 |
| 横並びにならない | display: flexを指定してない | 親要素に忘れず指定 |
| 縦に積まれない | flexの幅が固定 | flex: 1 1 100% などで柔軟に指定 |
図解：画面サイズによる並びの違い
画面が広いとき：
+------------------+----------------------------+
| 写真 | テキスト |
| (33.33%) | (66.67%) |
+------------------+----------------------------+
画面が狭いとき：
+----------------------------------------------+
| 写真 |
+----------------------------------------------+
| テキスト |
+----------------------------------------------+
これは、メディアクエリとFlexboxの連携によって実現できています。
まとめ：Flexboxの使いどころ
Flexboxはこんなときに便利！
- コンテンツを横に綺麗に並べたいとき
- スマホやPCで表示を切り替えたいとき
- 中央揃えや左右均等配置をしたいとき
- 高さを揃えたり、順番を変えたりしたいとき
次のステップは？
Flexboxを理解したら、次は以下にチャレンジしてみましょう：
justify-contentやalign-itemsで位置調整orderを使って並び順を変える- ネスト（入れ子）Flexboxで複雑なレイアウトに対応
- Gridレイアウトでさらに自由度の高いデザインに挑戦！
Flexboxは「レイアウト設計の武器」です。マスターすれば、どんなUIも思い通りにデザインできますよ！