Question

我正在努力知道应该应用显示器的哪些元素：flex;规则和应用flex-wrap：wrap;实现我想要的设计结构。

我理解媒体查询以及如何在特定屏幕尺寸之上和之下应用选项规则 - 媒体查询是否也可以覆盖弹性规则？

我在<div =“col-4” class=“sidebar”上有一个<div=“col-8” class=“ img-box”。如果屏幕尺寸超过480px，我希望它们彼此相邻，但我希望<div =“col-4” class=“sidebar”在<div=“col-8” class=“ img-box”下面叠加{ {1}}屏幕尺寸小于480px，并且堆叠时两者都显示100％。有人可以给我这个CSS的指导吗？ TIA

Answer 1

首先，没有理由在这里实际使用flexbox。但是，如果你真的想使用flex-direction，那就是直截了当的方式。

通常display: flex;用于父元素（容器），但您可以根据需要嵌套尽可能多的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始终应用于容器元素，并自动生成该容器中的所有直接子元素 flex-items 。

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

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

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

显示：弹性和定位我的元素

2 个答案: