画像を左右に振り分ける方法について見ていきます。

• 交互に配置が逆になるリストの作成

交互に配置が逆になるリストの作成

・今回は記事を右に画像と左にテキストがある記事を複数個あったとして普通に配置すると味気ないサイトになってしまうので偶数個目の記事を左に画像にして右にテキストを振り分けるようにしていこうと思います。

・偶数個目のセクションの主軸を変えたいので、section:nth-child(even)（セクションエヌスチャイルド・イーブン） に対して flex-direction: row-reverse; （フレックスディレクションロウリバース）にしてあげます。

・ただ、画像の右側にマージンを付けていたので外側に空白ができてしまいます。そうならないように画像とテキストの間に空白ができるようにします。

・まず、１００％の横幅から画像の１８０pxと余白分の３２pxを calcを使って設定してあげます。テキストにwidth: calc(100% – 180px – 32px);と指定します。

・画像とテキストの間に空白を配置したいので、 セクションに対して justify-content: space-between;（ジャスティファイコンテント・スペースビトゥイン）としてあげればいいでしょう。

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入