显示 flex 不能在 codepen 之外工作答案

【问题标题】：Display flex isnt working outside of codepen显示 flex 不能在 codepen 之外工作
【发布时间】：2021-07-03 05:08:02
【问题描述】：

我试图在 Codepen 中构建一个响应式的两列布局，它奏效了。布局非常简单，由一个 youtube 视频和一些文本组成。

但是，当我尝试在我的网站上实现它时，它没有工作......这是我的代码，希望有人能够帮助我：O

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    gap: 10px;
    @media (min-width: 56.25em){
      display: flex;
    }
  }

  .main-content {
    flex: 1;
    width: 100%;
  }

  .sidebar {
    flex: 1;
  }

  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
  <main class="flex-container">
    <section class="main-content">
      <h2>Sidebar</h2>
      <div class="videoWrapper"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/eX2qFMC8cFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </section>

    <aside class="sidebar">
      <h2>Main Content</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam placeat cumque exercitationem vitae nisi tenetur delectus praesentium doloremque, quibusdam nemo maxime laudantium et possimus pariatur doloribus excepturi. Veritatis ex numquam inventore odit dolorum mollitia dolorem, itaque atque non ratione molestias a repellat ullam corporis quisquam ipsa sit iure tempore nulla.
      </p>
   </aside>
  </main>
</body>
</html>

当我在 Chrome Inspector 中检查代码时，它清楚地显示命令“display: flex;”不工作，但我不知道为什么，我找不到解决方案。 Screenshot of it

【问题讨论】：

标签： html css flexbox media-queries

【解决方案1】：

除非您使用的是像 SASS 或 LESS 这样的 CSS 预处理器，否则您不能在特定选择器的“主规则”内嵌套媒体查询。在您的屏幕截图中，您可以看到浏览器尝试将媒体查询的第一行 @media (min-width: 56.25em){ 解释为单独的规则，方法是在其末尾添加一个分号 ;，但这是行不通的。

所以你必须分别编写主规则和媒体查询，在媒体查询中再次使用相同的 CSS 选择器：

.flex-container {
  gap: 10px;
  
}
@media (min-width: 56.25em) {
   .flex-container {
     display: flex;
  }
}

【讨论】：

【解决方案2】：

你必须为你的 CSS 写这样的东西，你有输入错误：

.flex-container {
  display: flex;
  gap: 10px;
}

  @media (min-width: 56.25em){
   .flex-container {
     gap: 20px;
    }
  }

【讨论】：

【解决方案3】：

更改此 CSS

.flex-container {
  gap: 10px;
  
}
@media (min-width: 56.25em){
   .flex-container{
     display: flex;
  }
}

【讨论】：