媒体查询中无法识别弹性项目的宽度属性

Question

所以我有一个 3 列布局，但由于某种原因，在我的中间列（sn-p 中的文本列）中，即使我设置了 .middle 的宽度，它仍然从一个边缘一直到另一个边缘70%。

Div 和 p 是块级元素，但我不太清楚为什么它们在我的媒体查询中的规范后保持 100% 宽度，您可以在代码底部找到。

我希望 p 元素的侧面有一些空间。

有问题的类是媒体查询中的最后一个列表。

body {
  background-color: green;
}
html,
body {
  height: 100%;
}
.container {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  width: 70%;
  margin: auto;
  background-color: white;
  border: 1px solid yellow;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  //flex: 1 20%;
  width: 25%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  //flex: 2 20%;
  width: 50%;
  height: 100%;
}
.right {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: center;
  order: 3;
  width: 25%;
  //flex: 1 50%;

}
div.list {
  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;
  ;
  border: 1px solid pink;
}
.right .list {
  // text-align: center;
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
.headbox h3 {
  color: orange;
}
#bigwrap {
  height: 100%;
}
.container {
  display: flex;
  //position: absolute;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.container p {
  margin-bottom: 12%;
}
.container img {
  margin-bottom: 10%;
}
.container img:first-child {
  margin-top: 5%;
}
.middle p:first-child {
  margin-top: 8%;
}
.left,
.middle,
.right {
  // border-right: 1px solid blue;

}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  flex: 2 20%;
}
.right .list {
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
.headbox h3 {
  color: orange;
}
.right .headbox {
  border: 1px solid orange;
  width: 70%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media all and(max-width: 800px) {
  #nav {
    justify-content: space-around;
  }
}
@media all and (max-width: 500px) {
  #nav {
    flex-direction: column;
    /*updated*/
    margin-bottom: 7%;
  }
  #nav ul {
    padding-left: 0;
    /*added*/
  }
  #nav li {
    flex: 1 1 100%;
    /*updated*/
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
  #nav li a {
    text-align: center;
    padding: 5px;
    margin: 5px;
  }
  .box img {
    max-width: 100%;
    margin-bottom: 9%;
  }
  #bigwrap {
    width: 100%;
    border: 1px solid gray;
  }
  .container {
    flex-flow: row wrap;
    height: 100%;
    width: 100%;
  }
  .left,
  .right {
    flex: 1 100%;
  }
  .middle {
    width: 70%;
  }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
      <img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
    </div>
    <div class="right">
      <div class="headbox">
        <h3>Visit Us</h3>
      </div>
      <div class="list">
        <ul>
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Hours</a>
          </li>
          <li><a href="#">Plan</a>
          </li>
          <li><a href="#">Directions</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

是的，您在媒体查询中将.middle 设置为width: 70%。

但您在代码中也将.middle 设置为flex: 2 20%。

此规则不在媒体查询中，因此始终应用它。它计算为：

• flex-grow: 2
• flex-shrink: 1
• flex-basis: 20%

当您的媒体查询启动时，width: 70% 会覆盖 flex-basis: 20%。

但是flex-grow: 2 和flex-shrink: 1 保持不变，因为你没有什么能阻止它们。

因此，浏览器首先应用width: 70%，然后应用flex-grow: 2，这会占用行上的所有剩余空间。 （因此，内容“边到边”扩展。）

在您的媒体查询中进行此调整：

而不是...

.middle { width: 70%`; }

使用

.middle { flex: 0 0 70%; }

或

.middle { width: 70%; flex-grow: 0; flex-shrink: 0; }

这将覆盖另一个声明的所有组件。