• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

左右交互のレイアウトの作り方(Flexbox編)

投稿者アイコン
2019/05/22
書いた人:
rurippa!
カテゴリ:
CSS   HTML
710 views

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

左右交互のレイアウトの作り方(Flexbox編)

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

目次

ベースになるHTML・CSS

はじめに、下記のようなレイアウトを作ります。
テキストと写真をまとめて<li>で囲み、その部分に「display: flex;」をかけて横並びにしています。

  • Photo

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

  • Photo

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

  • Photo

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

  • Photo

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

		<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>
		
  • Photo

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

  • Photo

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

  • Photo

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

  • Photo

    テキストが入ります。

最後に

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


この記事を読んだ人はこんな記事も読んでいます