【CSS】flexで左右交互に配置する方法

コンテンツを「flex」で配置する時、画像とテキストを互い違いに配置したいけど

どうしたらいいのかわからない時に見て欲しいです。

文字じゃわかりずらいかもなので、画像で作ってみました。

こんな感じの配置よくするよね。

そんな時はCSSでこの様に書こう！

flexで左右交互に配置する方法

.demo li {
  display: flex;
  justify-content: space-between;
}
.demo li:nth-child(odd) {
  flex-direction: row-reverse;
}

デモ

• 

  こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。

• 

  こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。

• 

  こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。

画像の通りにCSSができました☆

今回デモで利用したHTMLとCSSを下に書きますのでよかったら使ってくださいね！

HTML

<ul class="demo">
  <li>
    <img src="https://hajimete.org/wp-content/uploads/2023/09/flex-img1.jpg" />
    <p>こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。</p></li>
  <li>
    <img src="https://hajimete.org/wp-content/uploads/2023/09/flex-img2.jpg" />
    <p>こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。</p>
  </li>
  <li>
    <img src="https://hajimete.org/wp-content/uploads/2023/09/flex-img3.jpg" />
    <p>こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。こっちにテキストが入ります。</p>
  </li>
</ul>

CSS

.demo {
  margin: 0 auto;
  padding: 7% 0;
  width: 80%;
  background: #f1f4f9;
}
.demo li {
  display: flex;
  justify-content: space-between;
  margin: 0 0 7%;
}
.demo li:nth-child(odd) {
  flex-direction: row-reverse;
}
.demo li:last-child {
  margin-bottom: 0;
}
.demo li img {
  width: 54%;
}
.demo li p {
  width: 41%;
  font-size: 15px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 2px;
  padding: 3% 4% 0 0;
}
.demo li:nth-child(odd) p {
  padding: 3% 0 0 4%;
}