ここではタイトルの通り、flexboxを使って画像とテキストを２列に横並びに表示させて、かつスマホで表示させたときは画像とテキストを１列にする方法について見ていきます。
flexboxについて知らない方は、下記の記事を見ておくと理解がスムーズだと思います。
はじめに完成したサンプルをご覧ください。
ボタンで表示を切り替えてご覧ください。
See the Pen flexbox_responsive by kenichi (@ken81) on CodePen.
HTML
<div class="flex">
<div class="item">
<img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img04.png">
</div>
<div class="item">
<p>flexboxを使って600pxまでは２列表示にして、599px以下になるとflexboxが解除されて１列表示になります。</p>
<p>画像をdisplay:block;で中央寄せさせたり、少し調整が必要になります。</p>
</div>
</div>
CSS
.flex{
max-width: 600px;
margin: 0 auto;
}
img{
max-width: 100%;
display: block;
margin: 0 auto;
}
@media screen and (min-width:600px) {
.flex{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
}
.item+.item{
margin-left:1.0em;
}
}
これだとレスポンシブの感じが分からないので、コチラのサンプルを開いてでブラウザのサイズを変えて見てみてください。
コードの解説
HTML
<div class="flex">
<div class="item">
<img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img04.png">
</div>
<div class="item">
<p>flexboxを使って600pxまでは２列表示にして、599px以下になるとflexboxが解除されて１列表示になります。</p>
<p>画像をdisplay:block;で中央寄せさせたり、少し調整が必要になります。</p>
</div>
</div>
はじめにHTMLのコードを見てみましょう。
２つのclass名itemがclass名flexでラップしてあります。今回は、.flexにdisplay:flex;を適用させてて、子要素である.itemをflexアイテムとして使います。
２つの.itemにはそれぞれ、画像とテキストが入っています。HTMLの構成はこんなところです。
CSS
次にスタイルシートを見てみます。
CSS
.flex{
max-width: 600px;
margin: 0 auto;
}
img{
max-width: 100%;
display: block;
margin: 0 auto;
}
@media screen and (min-width:600px) {
.flex{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
}
.item+.item{
margin-left:1.0em;
}
}
メディアクエリ@media screen and (min-width:600px)を使ってブラウザの幅が600pxのところまでは、display:flex;が有効になるように指定して、599px以下になったときに無効（つまり１列）になるように指定しています。基本的な仕組みとしてはこれだけです。
あとは、画像の表示サイズや余白の調整をしているだけですので、それぞれの画像にあった調整をしてみると良いでしょう。
以上がflexboxを使って画像とテキストを横に並びレスポンシブにする方法でした。
