flexbox 的媒体查询问题答案

【问题标题】：Media query issue with flexboxflexbox 的媒体查询问题
【发布时间】：2019-01-17 23:49:08
【问题描述】：

此媒体查询应将 id 为 container2 的 div 设置为 50%，屏幕宽度为 500 像素。那个 div 里面有 light_blue 和 green 框。

这里是 jsfiddle https://jsfiddle.net/ofey/1yo4ck9e/1/

解决方案：https://jsfiddle.net/ofey/1yo4ck9e/18/

还有 css 媒体查询，

@media screen and (min-width: 500px) {
      #boxA {
        order: -1;
        width: 50%;
      }
      .container2 {
        width: 50%;
      }
      #boxB {
        order: 1;
      }
    }

    @media screen and (min-width: 600px) {
      #boxC {
        order: -1;
      }
      #boxB {
        width: 25%;
        order: 2;
      }
      .container2 {
        width: 50%;
      }
      #boxA {
        width: 25%;
        order: 1;
      }
    }

和html

<div class="container">
    <div class="box" id="boxA">
      <p>red</p>
    </div>
    <div class="container" id="container2">
      <div class="box" id="boxD">
        <p>light_blue</p>
      </div>
      <div class="box" id="boxC">
        <p>green</p>
      </div>
    </div>
    <div class="box" id="boxB">
      <p>dark_blue</p>
    </div>
  </div>

我不明白为什么它不起作用。

预期的结果是在 500 像素时看起来像这样，

谢谢，

【问题讨论】：

您在 HTML 中的任何位置都没有与选择器 .container2 匹配的元素……

标签： html css flexbox media-queries

【解决方案1】：

在您的 css 中，将 .container2 更改为 #container2，因为您使用了 id。

#container2 {
    width: 50%;
}

如果您还希望容器在右侧，就像您的图像一样，请添加order: 3;

#container2 {
    order: 3;
    width: 50%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>media queries</title>
  <style type="text/css">
    .container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .box {
      width: 100%;
      text-align: center;
    }

    #boxB {
      background: darkblue;
      color: white;
    }

    #boxD {
      background: lightblue;
    }

    #boxC {
      background: green;
    }

    #boxA {
      background: red;
    }

    @media screen and (min-width: 500px) {
      #boxA {
        order: -1;
        width: 50%;
      }
      #container2 {
        width: 50%;
        order: 3;
      }
      #boxB {
        order: 1;
      }
    }

    @media screen and (min-width: 600px) {
      #boxC {
        order: -1;
      }
      #boxB {
        width: 25%;
        order: 2;
      }
      #container2 {
        width: 50%;
        order: 3;
      }
      #boxA {
        width: 25%;
        order: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box" id="boxA">
      <p>red</p>
    </div>
    <div class="container" id="container2">
      <div class="box" id="boxD">
        <p>light_blue</p>
      </div>
      <div class="box" id="boxC">
        <p>green</p>
      </div>
    </div>
    <div class="box" id="boxB">
      <p>dark_blue</p>
    </div>
  </div>
</body>

【讨论】：

感谢您的帮助。我看到这个类是错误的。谢谢
我不确定是否需要 order:3，因为这应该默认为 order:0，因此应放在订单 -1 和 1 之间。