【CSS】flex-basisが効かない時の対処法

画像とテキストを横並びで表示したいときには、flexをする方法があります。

<div class="content">
  <div class="content__img"><img src="xxx" /></div>
  <div class="content__text"><p>xxx</p></div>
</div>

.content {
  display: flex;
}

.content__img {
  flex-basis: 50%;
}

.content__text {
  flex-basis: 50%;
}

画像に幅を指定しないと、画像のサイズがそのままで表示されてflex-basisで指定した通りの幅になりません。

次のように画像に幅を指定します。

.content__img img {
  width: 100%;
}

またレスポンシブ対応の際には、flex-wrapが初期値でnowrap（単一行に押し込む）に指定されている点も注意しましょう。

次のように親要素にflex-wrapにwrapを指定しておきましょう。

.content {
  display: flex;
  flex-wrap: wrap;
}