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行を追加するだけで左右反対に表示されるようになります。
反対表示する際の注意点
「flex-flow: row-reverse;」は非常に役立つコードですが、注意点があります。
flex-flow: row-reverse; の注意点
- クラスごと反対になる
- 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だけで横並びの要素を反対にすることが出来ます。知らなかった方は、是非使ってみてください。