Question

所以我有一个3列的布局，但出于某种原因，在我的中间列（片段中的文本列）中，即使我有.middle的宽度，它也会一直从边缘到边缘继续前进到70％。

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

我希望p元素在两侧有一些空间。

相关课程是媒体查询中的最后一个列表。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

1 个答案: