flexの応用 （横並び）

Question

flexを用いてコーディングをしているのですが、ネットで検索した通りに作成していますが、上手くいきません。あからさまに可笑しいところもあると思いますが、お助け頂けないでしょうか。
要素等変更して頂いて大丈夫です。

画像の様なものを作成したいです。

     <section>
       <div class="section-wrapper product">
         <div class="section-title"><h2>タイトル</h2></div>

         <div class="wrap">
         <div class="box large">
          <a href="..."><img src="..."/>
            <div class="box-text">
              <h3 class="white mb-3">りんご１</h3>
              <span class="simple_square_btn2">ボタン</span>
            </div>
          </a>
         </div>
           <div class="box large">
            <a href="..."/>
              <div class="box-text">
                <h3 class="white mb-3">りんご２</h3>
                <span class="simple_square_btn2">ボタン</span>
              </div>
            </a>
           </div>
           <div class="box small">
            <a href="...l"><img src="..."/>
              <div class="box-text">
                <h3 class="white mb-3">りんご３</h3>
                <span class="simple_square_btn2">ボタン</span>
              </div>
            </a>
           </div>
           <div class="box small">
            <a href="...l"><img src="..."/>
              <div class="box-text">
                <h3 class="white mb-3">りんご４</h3>
                <span class="simple_square_btn2">ボタン</span>
              </div>
            </a>
           </div>
          </div>
      　</div>
     </section>

.section-wrapper2{
  width: 1146px;
  height: 620.5px;
  background: transparent;
}
.section-wrap{ 
	display: flex; /* 横並びに */
	justify-content: space-between; /* 両端揃え */
}
.box {
	display: flex; /* 横並びに */
	flex-wrap: wrap; /* 折り返し表示できるように */
	justify-content: space-between; /* 両端揃え */
	flex-basis: 50%; /* 要素の幅指定 */
}
.box a {
	flex-basis: calc(100% - 20px); /* 要素の幅指定 */
	justify-content: center; /* 左右中央揃え */
	align-items: center; /* 上下中央揃え */
}
.box.small a {
	flex-basis: calc(50% - 10px); /* 要素の幅指定 */
}
.box.small a:nth-child(n+3) {
	margin-top: 20px;
}

.section-rsample{
  width: 1146px;
  height: 543px;
  background: transparent;
}

.box.large{
  width: 362px;
  height: 543px;
  position: relative;
/* background: url(...); */
}

.box.small{
  width: 362px;
  height: 256.5px;
  position: relative;
/* background: url(...); */
}

.box a{
  text-decoration: none;
}

.box-text{
  position: absolute;
  background-color: #000000;
  width: 362px;
  height: 150px;
  opacity: 0.8;
}

.box-text h3{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 36px;
  letter-spacing: 0.05em;
  line-height: 58px;
  text-align: left;
  color: #fff;
}

.box-text span{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #fff;
}

.simple_square_btn2 {
	display: block;
	position: relative;
	width: 120px;
  height: 32px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
}

Comments

[yambejp]

りんごの画像が３つに分割されているのはどう解釈すればよいのでしょうか？

[shin]

ご質問ありがとうございます。
こちらにて、質問を作り直しましたでの、もし宜しければご覧頂けますでしょうか。
https://teratail.com/questions/gu96u7odfy8als

Answer 1

ご提示のコードを試してみましたが、いろいろたくさん問題がありすぎるので、大きなものをいくつか指摘させていただきます。

• カンプ？にあるフッターがHTMLに記述されていない
• CSSにある.section-wrapper2 .section-wrapがHTMLに記述されていない
• カンプ？からはボックスの幅はビューポート依存であるように読めるが、固定値が指定してある。
• カンプ？ではボックスは横並びにするように読めるが、フレックスボックスやグリッドレイアウトが指定されていない。

とりあえず、この辺りから取り掛かってみてはいかがでしょうか。

Comments

[shin]

ご回答ありがとうございます。
参考にさせて頂きます。