Question

我正在建立我的第一个站点，我想使用flex来反转列。移动两行，其中一幅是宽度为100％的图像，然后是另一幅为100％的文本。在桌面上的单行上，左栏为50％宽度的文本，右栏为50％宽度的图像。

我使用的CSS代码工作得很好，除了我想遵循移动优先风格，然后我希望媒体来自（最小宽度：600像素），而不是（最大宽度：600像素）。

当前在移动设备上（小于600像素），列为100％，从600像素开始为50％。

那么我如何使用min-width以移动优先的方式显示代码？如前所述，我喜欢在移动列上使用100％的像素，并在600px之后反转顺序，现在在台式机上使用50％的列。

如果我切换了item属性值，那么在桌面列上是50％，但不在同一行上，一个接一个，另一个在左边，剩下50％的空间。所以我不知道为什么将CSS规则更改为（max-width：600px）到（min-width：600px）吗？

.parent {
  display: flex;
  font-family: arial, sans-serif;
 }

.item {
  width: 50%;
  padding: 2em;
  color: #ffffff;
  background: #eeeeee;
  min-height: 500px;
}

.last {
  color: #222;
  background: #ccc;
}

@media screen and (max-width: 600px){

 .parent {
    flex-direction: column-reverse;  
  }

 .item {
    width: auto;
    min-height: 200px;
 }

 .last {
  background: #aa0000;
 }

}

Answer 1

这是我的解决方案，它使用移动优先方法。

意思是，它将在媒体查询之前将所有样式应用于任何设备

此后，它将检查屏幕的宽度是否大于600像素，如果是，则将在媒体查询中应用样式；如果不是，则将忽略媒体查询中的样式。

切换样式后出现问题的原因是，您没有在媒体查询中设置flex direction的值

var myDocument = User.findOne({user_id: {$type: 25}});
if (myDocument) {
  var myName = myDocument.user_id;
  console.log(myName);
}

.parent {
  display: flex;
  font-family: arial, sans-serif;
  flex-direction: column-reverse;
}

.item {
  width: auto;
  min-height: 200px;
  padding: 2em;
  color: #ffffff;
  background: #eeeeee;
}

.last {
  background: #222;
  color: #fff;
}

@media screen and (min-width: 600px) {
  .parent {
    flex-direction: row;
  }
  .item {
    width: 50%;
    min-height: 500px;
  }

  .last {
    color: #222;
    background: #ccc;
  }
}

Answer 2

您应该可以通过在父级上使用它来实现此目的...

maxN*(maxN-1)

CSS Flex Column反向-响应

2 个答案: