display:flex;で要素を左右反対に表示する方法を紹介！

2022 8/15

2022年4月12日 2022年8月15日

takato（@n8takato）です！

横並びにした要素を左右反対にしたい。
でもHTMLで修正するのは面倒くさい。
cssだけでdisplay:flex;の要素を左右反対にする方法を知りたい。

この記事では上記の課題を解決します。

いきなり結論ですが、「display:flex;」で横並びにした要素をcssだけで左右反対にすることが出来ます。

これはweb制作の現場でも良く使用します。

今までHTMLで編集していた方は、この記事を読んでcssで編集出来るようになりましょう。

この記事を読むとどうなるのか？

「display:flex;」で横並びにした要素をcssだけで左右反対にすることが出来る
しかもたった1行のcssコードで実装可能
左右反対にする仕組みもわかるので、実装する際の注意点を知ることが出来る

この記事を書いた人

この記事を書いた僕はこんな人です！

都内制作会社でwebデザイナーとして勤務
webデザイナー歴2年目のひよっこ
web制作現場で学んだことを発信している人

cssに関する他の記事はこちら

display:flex;で左右反対に表示する方法

早速コードを紹介します。

横並びの親要素に下記のコードを追加することで、左右反対に表示することが出来ます。

左右反対に表示するコード

flex-flow: row-reverse;

このコードを追加するだけで、横並びの要素を左右反対に表示することが出来ます。

デモサイト

実際にデモを紹介します。

See the Pen display:flex;の左右反対表示 by takato (@ttakkatto) on CodePen.

上記のように、画像と文章の要素がそれぞれ反対に表示されています。

下記はそれぞれのコードです。

HTML

<head>
</head>
<body>
  
  <div class="articl01">
    <div class="left">
      <img src="https://drive.google.com/uc?export=view&id=1vHWo1dIZWhHi9SvsqbQaou5rYOWltqUC">
    </div>
    <div class="right">
      <p>これはカフェのテーブルでカプチーノを撮影した写真になります。撮影に夢中になりすぎて、カプチーノが冷めてしまいました。でも美味しかったです。</p>
    </div>
  </div>
  
  <div class="articl02">
    <div class="left">
      <img src="https://drive.google.com/uc?export=view&id=1vHWo1dIZWhHi9SvsqbQaou5rYOWltqUC">
    </div>
    <div class="right">
      <p>これはカフェのテーブルでカプチーノを撮影した写真になります。撮影に夢中になりすぎて、カプチーノが冷めてしまいました。でも美味しかったです。</p>
    </div>
  </div>
  
</body>

css

.articl01 {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  width:350px;
}

.articl01 .left {
  width:40%
}

.articl01 .left img {
  width:130px;
}

.articl01 .right {
  width:40%;
  text-align:justify;
}


.articl02 {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  width:350px;
  flex-flow: row-reverse;
}

.articl02 .left {
  width:40%;
}

.articl02 .left img {
  width:130px;
}

.articl02 .right {
  width:40%;
  text-align:justify;
}

上記のコードから分かるように、「flex-flow: row-reverse;」の1行を追加するだけで左右反対に表示されるようになります。