Flexboxのflex-directionプロパティを使って、画像とテキストの並びを交互に入れ替える方法をご紹介します。
まずはデモをご覧ください。
一覧ページなどでよくみるレイアウトです。
Flexboxを使うと、2行のコードで実装できるので、とても簡単です。
ではそのやり方をご紹介します。
HTML
<ul class="example">
<li>
<figure><img src="dummy.png" alt=""></figure>
<div class="txt">
<h1>タイトルタイトル</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</li>
<li>
<figure><img src="dummy.png" alt=""></figure>
<div class="txt">
<h1>タイトルタイトル</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</li>
<li>
<figure><img src="dummy.png" alt=""></figure>
<div class="txt">
<h1>タイトルタイトル</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</li>
</ul><li>内のHTML構造を変える必要はありません。
<figure>と<div class=”txt”>を入れ替えたりすることなく、すべて同じ構造のままで問題ありません。
CSS
.example li {
display: flex;
}
.example li:nth-child(even) {
flex-direction: row-reverse;
}ブラウザによってベンダープレフィックスが必要になります。
2019年最新のベンダープレフィックスは下記記事をご覧ください。
デモ
解説
flex-directionとは
要素が並ぶ方向を指定するプロパティです。
初期値は「row」で、今回は「row-reverse」を使っています。
「row」と「row-reverse」の違いを簡単に説明します。
flex-direction: row;
「row」は「flex-direction」の初期値で、なにも指定しないと適用されます。
要素を並べた時に、左から右へと配置されます。
flex-direction: row-reverse;
「row-reverse」は「row」と真逆で、右から左へと配置されます。
flex-directionについてもっと詳しく知りたい方は、下記の記事で詳しく解説しているのでご覧ください。
デモでの使い方について
このプロパティを使って、今回のデモでは下記のように記述しています。
.example li:nth-child(even) {
flex-direction: row-reverse;
}偶数の<li>タグに、「row-reverse」を適用する
という指定で、適用すると下記のようになります。
奇数番目は、「画像」⇒「テキスト」の順番。
偶数番目は、「テキスト」⇒「画像」の順番。
まとめ
「偶数だけ写真とテキストを入れ替えて…」というようにやっていると、レスポンシブ対応が少し面倒だったりしますよね。
このやり方ならHTMLのマークアップは一切変更する必要がないので、とても楽に実装することができます。是非ご活用ください。
