CSS

画像を左右に振り分ける

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

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

 

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

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

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

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

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

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

-広告-

 

 






-CSS