左右交互のレイアウトの作り方(Flexbox編)
左右交互になっているレイアウトを、Flexboxを使って作ります。

左右交互になっているレイアウトを、Flexboxで作ってみましょう。
目次
ベースになるHTML・CSS
はじめに、下記のようなレイアウトを作ります。
テキストと写真をまとめて<li>で囲み、その部分に「display: flex;」をかけて横並びにしています。
-
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
テキストが入ります。テキストが入ります。テキストが入ります。
-
テキストが入ります。テキストが入ります。
<style> ul { max-width: 600px; } ul li { display: flex; align-items: center; } ul li .photo, ul li .txt { width: 50%; box-sizing: border-box; } </style> <ul> <li> <p class="photo"><img src="https://unsplash.it/300/200?image=875" alt="Photo"></p> <p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </li> <li> <p class="photo"><img src="https://unsplash.it/300/200?image=896" alt="Photo"></p> <p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </li> <li> <p class="photo"><img src="https://unsplash.it/300/200?image=872" alt="Photo"></p> <p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p> </li> <li> <p class="photo"><img src="https://unsplash.it/300/200?image=938" alt="Photo"></p> <p class="txt">テキストが入ります。テキストが入ります。</p> </li> </ul>
flex-directionを使ってみよう
<li>に「flex-direction: row-reverse;」を指定することで、flexアイテムが主軸と逆方向(右から左)へ配置されます。
これを奇数or偶数行にかけることで、互い違いのレイアウトができます。
<style> /* 奇数の行に対して指定 */ ul li:nth-child(odd) { flex-direction: row-reverse; } /* 必要に応じて余白つけてください */ ul li:nth-child(odd) .txt { padding-right: 10px; } ul li:nth-child(even) .txt { padding-left: 10px; } </style>
-
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
-
テキストが入ります。テキストが入ります。テキストが入ります。
-
テキストが入ります。テキストが入ります。
-
テキストが入ります。
最後に
いかがでしたか?シンプルな形を例にしましたが、左右に振り分けたレイアウトはよくあると思いますので、チェックしてみてくださいね。