最大的媒体查询 (min-width:1020px) 一直覆盖最小的媒体查询 (max-width:599 px) flex-direction 值答案

【问题标题】：Largest media query (min-width:1020px) keeps overriding smallest media query's (max-width:599px) flex-direction value最大的媒体查询 (min-width:1020px) 一直覆盖最小的媒体查询 (max-width:599 px) flex-direction 值
【发布时间】：2017-06-30 23:51:10
【问题描述】：

我的 CSS 中有 4 个按此顺序排列的媒体查询：

@media screen and (max-width: 599px)
@media screen and (min-width:600px) and (max-width: 895px)
@media screen and (min-width: 896px) and (max-width: 1019px)
@media screen and (min-width: 1020px)

它们主要工作，除了当我尝试改变 flex-direction 时。我在媒体查询上面有这个类：

.home-mod4-founders {
 display:flex;
 align-items:stretch;
}

这在最小的媒体查询下：

@media screen and (max-width: 599px) {
 .home-mod4-founders {
  flex-direction:column;
 }
}

由于某种原因，当屏幕小于 599 像素时，它会采用其他 3 个查询之一的值：

.home-mod4-founders {
 flex-direction:row;
}

当我使用 Chrome 的开发工具检查页面时，它似乎去掉了最大的媒体查询部分，以便覆盖 599px 的媒体查询： screenshot 现场直播网站：www.whisperlodge.nyc

然后我将 CSS 和 HTML 复制粘贴到了 codepen http://codepen.io/chillinkwa/pen/MJZVEj

【问题讨论】：

当您更改flex-direction 时，align-items: stretch 不再适用于横轴。相反，它适用于flex-direction: column 的主轴。如果不看完整的代码，很难判断哪里出了问题。
好的，刚刚注册了 Codepen 并将我的 CSS 和 HTML 放入笔中：codepen.io/chillinkwa/pen/MJZVEj 如果笔中出现任何问题，可能是因为它是 wordpress.com 特定的。现场网站也在 www.whisperlodge.nyc

标签： css google-chrome flexbox media-queries

【解决方案1】：

我设法通过从最大的媒体查询中删除类来解决这个问题。由于下面的规范中存在相同的规范，因此它们似乎仍然适用于较大的浏览器宽度。

【讨论】：

stackoverflow.com/questions/43999830/…