【CSS】flexboxで画像とテキストを横並び、縦並びにレイアウト【メモ】

レスポンシブサイトでよく見かける画像とテキストを左右交互に、スマホで上下に配置してくレイアウトをflexboxを利用して実装する方法の個人的メモ。
ようやく最近使用するようになったflexboxの学習用メモです。

最終的に行いたい上記のレイアウトの前に、flexboxで画像とテキストを横並び、縦並びにレイアウトする方法を記載していきます。

flexboxで画像とテキストを横に並べて交互に表示

まず、実際に行いたいレイアウトを分離して横に並べて交互にするレイアウトのCSSを実装していきたいと思います。

画像とテキストを横に並べて表示

まず、flexboxで画像とテキストをソースの順番通りにレ横に並べてレイアウトするには、単純に親要素にdisplay:felex;を指定するだけ。flex-directionは初期値でrowが選択されるので指定なしでも、子要素が横並びで左から右に配置されます。
ここでは画像とテキストをそれぞれ両端に表示させたいので、justify-content: space-between;も指定しています。

See the Pen flexboxで画像とテキストを横並びにレイアウト by niwaka-web (@niwaka-web) on CodePen.

html例

<div class="box">
  <div class="text">
    <h3>見出しが入ります</h3>
    <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p>
  </div>
  <div class="pict"><img src="dummy_photo.jpg" alt=""></div>
</div>

css例

body {
  margin: 0;
  padding: 20px;
}

.box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}

.text {
}

h3 {
  font-size: 21px;
  margin: 0;
}

.pict {
  width: 30%;
  margin-left: 3%;
}

.pict img {
  width: 100%;
  height:auto;
}

ソースとは逆の順番で画像とテキストを並べて表示

上記と同じhtmlソースで、ソースとは逆の順番で左右にレイアウト表示する場合は、flex-direction:row-reverse;を指定。
ここではテキストを端に表示させたいので、テキスト関連のdivにtext-align:right;も指定しています。

See the Pen flexboxでソースの順番とは逆に画像とテキストを横並びにレイアウト by niwaka-web (@niwaka-web) on CodePen.

css例

.box {
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.text {
  text-align: right;
}

画像とテキストを横に並べて交互に表示

上記をベースに同じソースを複製し、左右に交互に表示させていきたいと思います。
今回は偶数のまとまりをソースと逆に表示させたいのでnth-child(even)を使用して、偶数のまとまりにflex-direction: row-reverse;を指定して交互に表示させています。
細かくはマージンなど交互にした方の表示の調整もしています。

See the Pen flexboxで画像とテキストを横並びに交互にレイアウト by niwaka-web (@niwaka-web) on CodePen.

htmlソースを確認すると、同じソースを4回繰り返しているだけで、CSSで交互に表示させているのがわかります。

flexboxで画像とテキストを上下に並べて表示

画像とテキストを横に並べることはできたので、今度は上下に表示する方法をメモ。

画像とテキストをソースの順番通りに上下に並べて表示

flexboxで画像とテキストをソースの順番通りに縦に上下に並べてレイアウトするには、単純に親要素にdisplay:felex;を指定し、flex-direction: column;を選択すると、子要素が縦に順番に配置されます。

htmlソースは上記の横並びと同じものを使用しています。

See the Pen flexboxで画像とテキストを上下にレイアウト by niwaka-web (@niwaka-web) on CodePen.

css例

body {
  margin: 0;
  padding: 20px;
}

.box {
  display:flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.text {
  width: 100%;
  text-align: center;
}

h3 {
  font-size: 21px;
  margin: 0;
}

.pict {
  width: 100%;
  text-align: center;
  min-height: 0%;
}

.pict img {
  max-width: 300px;
  height:auto;
}

flexboxでソースとは逆の順番で画像とテキストを上下に並べて表示

横並びと同様にソースとは逆の順番で画像とテキストを上下に並べて表示したいと思います。
flexboxで画像とテキストをソースとは逆の順番で縦に上下に並べてレイアウトするには、親要素にdisplay:felex;を指定し、flex-direction: column-reverse;を選択すると、子要素が縦にソースとは逆の順番に並んで配置されます。

See the Pen flexboxでソースとは逆の順番で画像とテキストを上下にレイアウト by niwaka-web (@niwaka-web) on CodePen.

css例

.box {
  display:flex;
  flex-direction: column-reverse;
}

IE11のバグ対応（flex-direction使用時の注意）

IE11では、flex-directionでcolumn、またはcolumn-reverseを指定した時に子要素に画像がある時は、レスポンシブなどで元のサイズより小さく表示した際に画像の元サイズの高さ分スペースが出来てしまいます。そちらの対策として、子要素にmin-height: 0%を指定することでスペースが出来ないようになります。
下記の参照先のサイトを参考にさせて頂きました。

参照