兩列 CSS flexbox 不響應 800px 媒體查詢

Question

我正在嘗試創建一個兩列的 flexbox，當最大寬度為 800 像素時，它會變成 1 列。 我試圖重新創建的行為在這里： https : //www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_responsive2

我遵循了該教程中的確切 css 屬性，但我不確定為什么媒體查詢沒有響應我的代碼。

我的項目鏈接在這里： https : //codepen.io/saminaCodes/pen/QWEzBmE?editors=1100

HTML 部分

<section class = "section-container">

 <div class = "description">
 <h2> Project Name / Job Title </h2>
 <p> Apple pie cotton candy pie powder jelly pudding caramels sesame snaps. Chupa chups donut brownie 
 chocolate cupcake apple pie lemon drops oat cake. Cupcake cotton candy marshmallow sweet roll halvah 
 lollipop croissant tiramisu </p>

 <hr>

 <p class = "notes">
  <b class = "bold">Date:</b> October 2020 - Present<br>
  <b class = "bold">NOTES:</b> n/a<br>
 </p>

  <a href = "#"> Join organization name>></a>
 </div>


 <div class = "content">

 </div>
 </section>

CSS 部分

.section-container {
  width: 80%;
  display: flex;
  flex: wrap;
  margin: auto;
}

.description {
  flex: 40%;
  padding: 1em;
}

.content {
  flex: 60%;
  border: solid 0.25em #FFCC5C;
  border-radius: 20px;
  padding: 1em;
}

@media (max-width: 800px) {
  .description, .content {
    flex: 100%;
  }
}

Answer 1

您的代碼運行良好，但您錯過了 css 中flex規則中的技術錯誤。 你寫了flex: wrap ，但你需要正確地寫flex-wrap: wrap 。 出於這個原因，上述塊不包含在一列中。

應該是這樣的：

.section-container {
  width: 80%;
  display: flex;
  flex-wrap: wrap; /*is here*/
  margin: auto;
}

Answer 2

使用width而不是flex 。 flex需要其他參數，如收縮和增長，例如flex: 0 1 40%;

.section-container {
  width: 80%;
  display: flex;
  flex: wrap;
  margin: auto;
}

.description {
  width: 40%;
  padding: 1em;
}

.content {
  width: 60%;
  border: solid 0.25em #FFCC5C;
  border-radius: 20px;
  padding: 1em;
}

@media (max-width: 800px) {
  .description, .content {
    width: 100%;
  }
}