要素の配置(flex)が上手くいかない。

Question

前提

webサイトを制作しようとしている初学者です。
独学でサイト作成の勉強をしています。
ページのevent_notificationとevent_calendarをdisplay:flex;を用いて、横に２カラム配置し、その下にarticle_containerを横幅一杯の１カラムの配置にしたいと考えています。
何卒ご回答を宜しくお願いします。

実現したいこと

display:flex;を用いて上記の配置をしたい。
event_notification、event_calendarを２カラム配置
その下に
div article_containerを１カラムで配置、表示したいと考えております。

ここに実現したいことを箇条書きで書いてください。
・２カラム、その下に１カラムの配置

エラーメッセージ

該当のソースコード

html

<div class="main_container">
      <div class="event_container">
        <div class="event_notification">
          <p>2023年 ◯◯◯</p>
          <p>2023年 ◯◯◯</p>
          <p>2024年  ◯◯◯</p>
        </div>
        <div class="event_calendar">
          <p> ◯◯◯カレンダー</p>
          <div class="event_calendar">
            <iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Asia%2FTokyo&title=%E5%80%8B%E5%B1%95%E6%97%A5%E6%99%82&showPrint=0&showTabs=0&showCalendars=0&showTz=0&src=NzlkMDNiMTRkN2FmODU2MTg5YTM2OGM1ZTY1MmQ2OTlmODU0ZDg1NjgzMGJjMjBjMDI4N2Y5YWY0OWI0NjkyNkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=amEuamFwYW5lc2UjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23795548&color=%230B8043" style="border:solid 1px #777" width="100%" height="550px" frameborder="0" scrolling="no"></iframe>
        </div>
      </div>
      <div class="article_container">
        <div class="solo_exhibition">
            <p><i class="fa-solid fa-pen-to-square"></i>2022年9月20日 <span class="solo"> ◯◯◯</span></p>
            <h2>- ◯◯◯ Part2 -</h2>
            <div class="solo_exhibition_1">
              <div class="solo_exhibition_photo">
                <img src="../event/image/2022.9月（ ◯◯◯）.jpg" alt="個展ハガキ" width="250px" height="400px">
              </div>
              <div class="solo_exhibition_article">
                <p class="article_h1"> ◯◯◯</p>
                <p class="article_h1">- ◯◯◯ Part2 -</p>
                
                <div class="article_h2"><span class="article_h2_title"> ◯◯◯</span>9/23(木) 〜 25(日)</div>
                  <p> ◯◯◯ ◯◯◯ ◯◯◯。<br>
                   ◯◯◯ ◯◯◯ ◯◯◯ ◯◯◯ ◯◯◯</p>
                </div>
              </div>
            </div>
            <h1 class="head_exhibition__other">その他</h1>
         <div class="other_exhibition">
              <p><i class="fa-solid fa-pen-to-square"></i>2022年12月10日 <span class="other"> ◯◯◯</span></p>
            </div>
        </div>
      </div>

css

.key_visual {
  background-image: url("../image/◯◯◯のコピー.JPG");
  width: 100%;
  height: 50vh;
  background-repeat: no-repeat;
  background-position: center;
}

.event_notification {
  background-image: url("../image/table201261768_TP_V.png");
  background-repeat: no-repeat;
  margin-left: 50px;
  width: 800px;
  height: 300px;
  color: #EEEEEE;
  border-radius: 5px;
}

.event_container {
  display: flex;
}
.event_notification {
  flex: 0.8;
}
.event_calendar {
  flex: 0.2;
}

.head_exhibition__solo,.head_exhibition__other {
  content: "";
  display: inline-block;
  width: 65%;
  height: 50px;
  padding: 5px;
  padding-left: 20px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

.solo_exhibition_photo {
  margin-left: 50px;
}

.solo_exhibition_1 {
  display: flex;
}
.solo_exhibition_article {
  margin-left: 100px;
}

.article_h1 {
  font-size: 1.5rem;
}
.article_h2 {
  font-size: 1.5rem;
}

.article_h2 {
  position: relative;
  padding: 1.2rem;
  width: 80%;
  font-weight: 300;
  color: #555555;
  background: #fff;
  border: 2px solid #f09199;
  box-shadow: 0 0 5px 2px #fce2c4 inset;
}
.article_h2_title {
  position: absolute;
  padding: 0 .5em;
  left: 20px;
  top: -15px;
  font-weight: bold;
  background-color: #fff;
  color: #140e0f;
}

.right_container {
  text-align: center;
}

.right_container p {
  margin: 0;
}

.event_calendar {
  margin-top: 10px;
}

試したこと

event_notification、event_calendarの親要素にdisplay:flex;をあてました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

event_notificationとevent_calendar を横に2カラム
article_containerを横幅一杯の１カラム
ということなら、下記のような設定になります。

flex-wrap: wrap; で折り返しできるようにして、ご希望の幅を設定します。

.event_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.event_notification {
  width: 45%;
}
.event_calendar {
  width: 45%;
}
.article_container {
  width: 100%;
}

カラム幅は同じになるようにしてますが、ご希望により調整してください。

display: grid; を使った方がよりシンプルかつ自由度が高く設定できるのでそれを検討されてもいいでしょう。

Comments

[kenharuka]

丁寧なご回答ありがとうございます。
とても参考になりました。