CSS Flex Column 反向 - 响应式

Question

我正在构建我的第一个网站，我想使用 flex 来反转列。移动两行，一行 100% 宽度的图像，另一行 100% 的文本。在桌面上的单行上，左列 50% 宽度的文本和右列 50% 宽度的图像。

我使用的这个 css 代码工作得很好，除了我想遵循移动优先样式，然后我希望媒体来自 (min-width: 600px) 而不是 (max-width: 600px)。

目前在移动设备上（小于 600 像素）列为 100%，而 600 像素以上的列为 50%。

那么如何使用 min-width 显示移动优先的代码？如前所述，我喜欢在移动设备上的列为 100%，在 600px 后反转顺序，现在桌面上的列为 50%。

如果我切换项目属性值，那么在桌面上，列是 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

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

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

之后它会检查屏幕的宽度是否大于600px，如果是，那么它将应用媒体查询中的样式，如果不是，那么它将忽略媒体查询中的样式。

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

.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;
  }
}

<div class="parent">

  <div class="item last">
    <h2>Flexbox</h2>
    <p>Testing...</p>
    <p>Testing...</p>
    <p>Reduce the window size to below 600px to see an example.</p>
  </div>

  <div class="item" style="background: url(https://unsplash.it/800/300) center center no-repeat; background-size: cover;"></div>

</div>