フレキシブルボックスで画像と文字を横並びにしたいが、上手くいかず。

Question

/* HTML */

<div class="main__business">
    <div class="main__business-img">
          <img src="business.jpg" alt="">
    </div>
    <div class="main__business-describe">
          <h2>BUSINESS</h2>
          <p>常にユーザーファーストの精神を心がけております。</p>
          <a class="viewmore" href="aas">view more<span>＋</span></a>
    </div>
</div>

/* CSS */

.main__business {
    display: flex;
    justify-content: space-between;
    padding-bottom: 500px;
    flex-direction: row-reverse;
}

.main__business-img img {
    max-width: 70%;
}

.main__business-describe {
    text-align: left;
}
``````ここに言語を入力




display: flex;
justify-content: space-between;

2つを使用し、左右均等にしたいが、flex-direction: row-reverse;で逆順にした時の挙動がおかしい。


図のように画像と文字の間に余白ができるはずなのに出来ていないです。解決方法あれば教えて頂けるとありがたいです。

![イメージ説明](ba706cf1ec0af2c814b795e7844594fa.jpeg)

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[K2816]

修正致しました。よろしくお願いします。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

Answer 1

挙動がおかしい。

特におかしくないです。row-reverseする前の状態のときに左右の間に空間があるのは、imgのmax-width: 70%;の残りの幅です。
max-width で調整するより、最初からflexのサイズを空間ができるように調整してみてはいかがでしょう。

.main__business > div {
    flex-basis: 49%; /* 例えば */
}

Comments

[K2816]

それは盲点でした。無事解決しました。ありがとうございました!