niwaka-web

webサイト構築関連のにわか知識集

CSS

【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%を指定することでスペースが出来ないようになります。
下記の参照先のサイトを参考にさせて頂きました。

参照

IE11での画像の下に隙間ができる箇所に関して参考にさせて頂きました。
Web pixyさん flex-directionを指定した時に IE11で表示がおかしくなる

-CSS
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS】属性セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第4弾「属性セレクタ」の覚書。 目次 属性セレクタの概要 属性セレクタの使用例 個人的メモ …

Font Awesome 5の使い方【概要】

webでよく利用されているアイコンフォントFont Awesomeのバージョン5がいつの間にかリリースされていたので使い方を自分の備忘録として書き留めておきます。 こちらの記事を書く際にまだFont …

【CSS】擬似要素と擬似クラスの違いの覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。 最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小 …

【Bootstrap4】グリッドレイアウト(配置)

Bootstrap4のグリッドレイアウトの説明は長いので配置も別ページに。 Bootsatrap4からはFlexbox配置ユーティリティを使用して、縦と横の列を整列させることができるようになりました。 …

Font Awesome 5の使い方【Web Fonts with CSS編】

Font Awesome 5の使いとしては、SVG with JavaScript(JavaScriptとSVGによる描画)とWeb Fonts with CSS(CSSとwebフォントによる描画)の …