display:flex 和定位我的元素

Question

我很难知道应该应用哪些元素 display:flex;规则和应用 flex-wrap:wrap;来实现我想要的设计结构。

我了解媒体查询以及如何为高于和低于特定屏幕尺寸的选项应用规则 - 媒体查询也可以覆盖弹性规则吗？

我有一个 <div =“col-4” class=“sidebar” 和一个 <div=“col-8” class=“ img-box” 。如果屏幕尺寸超过 480 像素，我希望它们彼此相邻，但我希望 <div =“col-4” class=“sidebar” 在屏幕尺寸较小时堆叠在 <div=“col-8” class=“ img-box” 下面大于 480 像素，并且它们在堆叠时都显示 100%。谁能给我关于CSS的指导吗？ tia

Answer 1

首先，这里没有理由实际使用 flexbox。但是，如果您真的想使用，可以直接使用 flex-direction。

通常display: flex; 用于父元素（容器），但您可以根据需要嵌套任意数量的弹性容器。

关于您的用例，您可以轻松实现所需的响应式布局，如下所示：

.container{
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 480px){
  .container{
    flex-direction: row;
  }
}

请注意，这假设您的标记如下所示：

<div class="container">  
  <div class="col-8">
      ... 
  </div>

  <div class="col-4">
     ...
  </div>
</div>

我已经为您制作了a pen 的示例，以便您了解全貌。

---

其次，我不确定你期望<div=“col-8”> 有什么效果，但 CSS / HTML 中没有这样的东西。完成这项工作的方法是将其用作一个类，即：<div class=“col-8 img-box”>。然后在您的 CSS 中，您需要添加类似以下内容：

.col-8{
  width: calc(100% / 12 * 8);
}

（也将其添加到笔中）

Answer 2

display: flex 总是应用于 container 元素并自动使该容器中的所有直接子元素 flex-items。

flex-wrap:wrap; 也适用于 容器，当它们不适合一行/列时，让弹性项目溢出到下一行或下一列（取决于 flex-direction）。

它与媒体查询无关，但您当然可以将这些放入媒体查询中，以便在不同的屏幕尺寸上对弹性容器和项目进行不同的处理。

关于你的最后一段：最好将它作为一个单独的问题发布 - 它与 flex 无关。但是这里的代码有问题：<div =“col-4” class=“sidebar” 不可能是正确的 - 可能你的意思是 <div class="sidebar col-4"> ？另一个也一样...