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

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

takato(@n8takato)です!

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

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

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

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

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

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

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

この記事を書いた人

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

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

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

あわせて読みたい
cssで句読点やカッコなどの約物を詰めて文字間を調整する方法! cssで句読点やカッコの余白を詰めたい この記事では上記の課題を解決します。 タイトルやキャッチコピーを綺麗に見せるために、文字の間隔を詰めます。その際句読点やカ...
あわせて読みたい
レスポンシブwebデザインの概念と作り方を現役webデザイナーが紹介! レスポンシブwebデザインって何?どうやって作るの? この記事では上記の課題を解決します。 webデザインの勉強をしている方はレスポンシブwebデザインという言葉を一度...
目次

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だけで横並びの要素を反対にすることが出来ます。知らなかった方は、是非使ってみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次