左右交互のレイアウトの作り方（Flexbox編）

左右交互になっているレイアウトを、Flexboxで作ってみましょう。

目次

• ベースになるHTML・CSS
• flex-directionを使ってみよう
• 最後に

ベースになる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>
		

• 

  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。テキストが入ります。

• 

  テキストが入ります。テキストが入ります。

• 

  テキストが入ります。

最後に

いかがでしたか？シンプルな形を例にしましたが、左右に振り分けたレイアウトはよくあると思いますので、チェックしてみてくださいね。