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

2022 5/15

2022年4月13日 2022年5月15日

takato（@n8takato）です！

display:flex;で横並びにした要素を左右反対に表示したい

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

横並びに表示した際、左右の要素を反対にしなければならない場合があります。HTMLで修正するのは時間がかかり大変な作業になりますよね。

しかし、cssだけで簡単に左右の要素を反対にすることが出来ます。

この記事では横並びの要素を左右反対にする方法を紹介します。web制作に関わる方は必見です。

この記事を書いた人

26歳
男性
都内制作会社に勤めるwebデザイナー
法人営業職→未経験でwebデザイナーに転職

当ブログでは他にもcssに関する記事を書いています。

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行を追加するだけで左右反対に表示されるようになります。