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

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

takato(@n8takato)です!

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

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

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

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

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

この記事を書いた人

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

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

cssに関する記事はこちら

あわせて読みたい
【簡単】cssで文字がキラッと光るアニメーションの作り方を紹介! cssで文字をキラッと光らせるアニメーションを作りたい この記事では上記の悩みを解決します。 webサイトの構築をしていると、一定の間隔で文字をキラッと光らせて欲し...
あわせて読みたい
cssで句読点やカッコなどの約物を詰めて文字間を調整する方法! cssで句読点やカッコの余白を詰めたい この記事では上記の課題を解決します。 タイトルやキャッチコピーを綺麗に見せるために、文字の間隔を詰めます。その際句読点やカ...
あわせて読みたい
【css】幅固定の中で横幅100%に表示する簡単な方法を紹介します! 幅固定の中にある要素を横幅100%表示したい この記事では上記の課題を解決します。 LPの制作をしていると、1つの要素だけ横幅100%で表示するようなコーディングに遭遇...
目次

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

反対表示する際の注意点

「flex-flow: row-reverse;」は非常に役立つコードですが、注意点があります。

flex-flow: row-reverse; の注意点

  1. クラスごと反対になる
  2. 3つ以上の場合は逆順になる

クラスごと反対になる

「flex-flow: row-reverse;」を使用すると、親要素のクラスごと反対に表示されます。

そのため、クラスについている装飾ごと左右反対になるということです。

例えば、左右異なる横幅に設定している場合、「flex-flow: row-reverse;」を加えると横幅の大きさごと反転します。

下記のデモサイトは、左右の横幅を変えております。横幅ごと左右反対になっているのが分かると思います。

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

要素だけ左右反対にすることが出来ないので、注意してください。

3つ以上の場合は逆順になる

横並びにする要素が3つ以上ある場合、「flex-flow: row-reverse;」を使用すると逆順になります。

下記のデモサイトは、3枚の写真が横並びになっています。「flex-flow: row-reverse;」を追加することで、全ての写真が逆順に並んでいます。

See the Pen 横並び 反対 by takato (@ttakkatto) on CodePen.

そのため、ある箇所だけの順番を反対にするなどの設定が出来ないので、気をつけてください。

最後に | flex-flow: row-reverse;で要素を反対にしよう

この記事では、「flex-flow: row-reverse;」を使って横並びの要素を反対に表示する方法を紹介しました。

1行のcssだけで横並びの要素を反対にすることが出来ます。知らなかった方は、是非使ってみてください。

\楽天ポイント5倍セール!/
楽天市場
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる