CSS

画像とテキスト配置

フレックスボックスを使って画像とテキストを配置する方法について

  • 画像とテキストの配置

画像とテキストの配置

・画像とテキストをフレックスボックスで横並びにする場合の配置方法についてみていきます。

・セクションを使って大きな枠を作り、その中に画像とテキストを書いていきます。

・文章を右に寄せたいのですが、左側に画像以外の要素を含めたいこともありますし、右側に p 以外の要素を配置したいこともあるので、拡張性を考えて div でそれぞれの領域を囲ってそれらを横並びにします。

・セクションをフレックスコンテイナーとして display:flex; に設定して横並びにし、画像は幅を固定したいので width: 180px;を指定。テキストはブラウザの大きさに合わせて動くよう flex:1;と指定します。

・画像とテキストがくっつきすぎている場合は画像の右側に余白を作るためにmargin-right: 32px; など余白を作ってあげます。

・複数のセクションを作り記事を増やします。

・セクションの間がつまりすぎているので間隔を作るためmargin-bottom: 60px; など余白を作ってあげるといいでしょう。

-広告-

 

 






-CSS