flex boxの使い方

Question

このようなものを実現したいと思っているのですがうまくいきません

<section class="vase">
     <div class="vase-container">
      
      <div class="vase-title">
         <h2>かんたん、かわいい<br>FLOWERのための花の器</h2>
         <p>初回限定25%off</p>
      </div>

      <div class="vase-image"></div>
 
      <div class="vase-body">
        <p>お花を飾るのに欠かせないのが花器。でも、お花と花器の相性もさまざま。手持ちにぴったりのものがなくて、いまいちかわいく飾れない…なんてことも。そこで、誰でもかんたんに、かわいくお花を飾れる専用の花器をつくりました。お花のある暮らしが、もっと楽しみになりますように。</p>
        <div class="vase-variation">
          <div class="item bell"></div>
          <div class="item moon"></div>
          <div class="item candle"></div>
        </div>
        <div class="vase-price">
          <div class="vase-price-taitle">
            初回注文後、 <br>2週間以内
          </div>
          <div class="traial-price">
            1,800円(送料無料)
          </div>
          <div class="normal-price">
            通常価格 2,400円 (送料無料)
          </div>
          <div class="footnote">
            アプリ内でご購入いただけます
          </div>
        </div>
      </div>
     
      
     </div> 
    </section>

.vase {
    padding:10vmin 0 0;
    background-color:#e7e3df;
}

.vase-container {
    min-height:730px;
    flex-flow:column wrap;
    display: flex;
}

.vase-title {
    padding:0 61.44px;
    order: 1;
    width:50%;
    height:fit-content;

}

.vase-title h2{
    text-align: center;
    margin-top: 0;
    font-size:2.6em;
}

.vase-body {
    order: 2;
    width: 400px;
    margin: 0 auto;
    margin-top: 32px;
    padding: 0;
}

.vase-body p {
    margin-bottom:15px;
}

.vase-variation {
    display: flex;
    margin:24px,0px;
}


.item {
    height: 116px;
    max-width: 98px;
    position: relative;
}


.bell {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/vase_bell-3242683261f661614798b85f339c955bd9a56d231773730ffd7a0ab8028747e2.jpg);
    background-size:cover;
}


.moon {
     background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/vase_moon-6ef8eca3a0e8166d7a28acda51109e2050ee74ed94a839638ac1f954223647fb.jpg);
     background-size:cover; 
}


.candle {
   background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/vase_candle-ca20f4ad96c7cbfe245a497dc9aa0875a4bcc5c8a14056e8297096bb720d4bdd.jpg);
   background-size:cover;
}


.vase-image {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_vase-45bcc89846e1a077353f799e42054251c3e3e570fcc453b8d96282d5df1ad6db.jpg);
    width:50%;
    height:730px;
    order:3;
    background-position: center bottom;
}

やってみたこと

marginのサイズを確認してみましたが理想の形のコードと変わりはありませんでした
flexboxについて調べてみましたがやはりどこがダメなのか分かりません

今日はずっとこのことについて考えてみてもう限界だったので質問させていただくことにしました。どなたかご回答よろしくお願いします

Comments

[m.ts10806]

「Flex」は本件とは無関係かと思います。
https://teratail.com/tags/Flex

Answer 1

模写元はこうなってるようです。

.vase-container {
	/* min-height: 730px; */
	flex-flow: column wrap;
	display: flex;
	height: 730px; /* これがない */
}

Comments

[退会済みユーザー]

回答ありがとうございます
実現できたものの

どうしてmin-heightではいけないのでしょうか

[Lhankor_Mhy]

わー、またそれですか。
前回もそうやって質問をクローズしてくれませんでしたよね……？

[Lhankor_Mhy]

まあ、いいや。
別に納得いかないならクローズしなくていいです。

min-height は最小の高さ、という意味なので、どこまでも大きくなります。
そして、height の初期値は auto なので、内容物に合わせて大きくなる、ということです。
ですから、高さが内容物に合わせてどこまでも大きくなるので、折り返しが発生しようがない、ということです。

[退会済みユーザー]

理解することができましたありがとうございます
最初の言葉余計です。
それオフラインで言ったら嫌われますよw

[miyabi_pudding]

横槍すみません。
flex-flow: column wrap;
で、wrap値があるため、
折れなきゃ表示し切れない内容の場合折れるって設定も相まってそうですね。

質問者さん、質問投げっぱにしないで、
しっかりと解決したなら閉じるようにしましょう。

[退会済みユーザー]

閉じましたよ！！！
回答ありがとうございます！！

[miyabi_pudding]

> それオフラインで言ったら嫌われますよw

質問を閉じないような行動の仕方もオフラインでは嫌われると思いますが。

[退会済みユーザー]

わからないのに閉じろということですか？

[退会済みユーザー]

わからなかったので閉じませんでした

[Lhankor_Mhy]

>それオフラインで言ったら嫌われますよw

俺は嫌われてない

>わからないのに閉じろということですか？

生殺与奪の権をｒｙ

[miyabi_pudding]

その前回の質問と思しきもののやり取りを拝見しましたが、
Lhankor_Mhyさんが最後にコメント残されているので、それを見てわからなければ、また0831nnanaさんの方から、わからないならわからないと返事されてはいかがでしょうか？
質問閉じないうちに、そのコメント無視して、
次の質問を投稿してしまっている行動に対しての言葉だと思います。

[Lhankor_Mhy]

まあ、ネタはともかく。
前回の質問で分からないことがあって閉じられないなら、コメント欄で質問してください。

質問をクローズせず、なぜクローズしないのかの理由も説明しないのでは、私のコメントを無視してるようにしか思えないです。
そんなだからみんなに嫌われるんですよ？

[退会済みユーザー]

分かりました
ご指摘ありがとうございます

[退会済みユーザー]

また一言余計ですねw

[退会済みユーザー]

お二人ありがとうございました

[Lhankor_Mhy]

鬼滅の刃、見てないんですか……？
それはスベったなあ

[Lhankor_Mhy]

まあ、わかりました。
ご不快でしょうから、今後はあなたには関わらないようにしますね。
失礼をいたしましたことお詫びいたします。

[miyabi_pudding]

> それはスベったなあ

すみません、横槍の私が、ネタ知って吹きました。
質問閉じるか閉じないかは、質問者さんですしね・・・。
まさに生殺与奪の権r（以下ry

[退会済みユーザー]

関わらないようにしますとかw
煽ってんるんですか？

Answer 2

flexboxについて調べてみましたがやはりどこがダメなのか分かりません

どの様に調べてどの様に試してみたのですが？疑問点がわかりません。フレックスボックスについての基本については下記リンクのMDNを参照してください。今回の説明では一部を抜粋していますが、他の部分も併せて確認してください。

フレックスボックスを使ってレイアウトされる文書の領域は、フレックスコンテナーと呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して display プロパティの値を flex もしくは inline-flex に設定します。またこれにより、このコンテナー直下の子要素が フレックスアイテムとなります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。

フレックスボックスの基本概念 - MDN

flexboxを使うのであれば、コンテナー直下の子要素で左右に並べたいコンテンツを指定する必要があります。今回の場合はvase-containerの直下に添付画像の様に左に並べるコンテンツと右に並べるコンテンツ(画像)を指定してあげるだけで問題ないかと思います。