Question

我希望services-bar__title和services-bar__services的{{1}}为max-width，以便按以下格式获得容器的正常flexbox行为，但是如果视口更宽，则list不会比1024px扩展得更多。我尝试设置容器的宽度和最大宽度，但是由于容器不再居中，似乎没有按预期工作，有什么想法吗？

1024px

.services-bar {
  display: flex;
  flex-direction: column;
  height: 20rem;
  width: 100%;
  box-shadow: 0 -3rem 8rem rgba(#000, 0.5);
}

.services-bar__title {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.services-bar__services {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Answer 1

如果我对您的理解正确，则希望将服务扩展到100％（最大1024px）。对吧？

为此，您需要将默认宽度设置为100％，并将最大宽度设置为1024px。

.services-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0 -3rem 8rem rgba(0, 0, 0, 0.5);
  max-width: 1024px;
  
  .services-bar__title {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .services-bar__services {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .services-bar__services_1,
  .services-bar__services_2,
  .services-bar__services_3,
  .services-bar__services_4 {}

<div class="services-bar">
  <div class="services-bar__title">
    test title
  </div>
  <div class="services-bar__services">
    <div class="services-bar__services_1"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_2"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_3"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_4"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>

  </div>
</div>

Answer 2

如果我正确理解这是什么意思？然后，您可以使用媒体查询来解决您的问题。我在大于1024像素的设备上设置了max-width to none。

.services-bar {
  display: flex;
  flex-direction: column;
  height: 20rem;
  width: 100%;
  box-shadow: 0 -3rem 8rem rgba(#000, 0.5);
  }
  .services-bar__title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: red;
    max-width: 1024px;
  }
  .services-bar__services {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background:green;
    max-width: 1024px;
  }

  
 @media only screen and (min-width : 1024px) {
  .services-bar__services {max-width: none;}
  .services-bar__title {max-width: none;}
}

<div class="services-bar">
  <div class="services-bar__title">
    test title
  </div>
  <div class="services-bar__services">
    <div class="services-bar__services_1"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_2"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_3"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_4"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>

  </div>
</div>

Answer 3

为此，您无需将services-bar设为flex，而只需将services-bar__title和services-bar__services保留为flex。

使用justify-content: space-around;中的services-bar__services在整个容器中分发物品。对于services-bar，请同时设置max-width: 1024px;和margin: 0 auto;，以使其保持居中并且不会超出1024px。

尝试一下：

body {
  margin: 0;
}

.total-width {
  width: 100%;
  height: 40px;
  background-color: blue;
}

.width-1024px {
  max-width: 1024px;
  margin: 0 auto;
  height: 40px;
  background-color: yellow;
}

.services-bar {
  height: 20rem;
  box-shadow: 0 -3rem 8rem rgba(#000, 0.5);
  max-width: 1024px;
  margin: 0 auto;
}

.services-bar__title {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.services-bar__services ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0;
}

<div class="total-width"></div>
<div class="width-1024px"></div>

<div class="services-bar">
  <div class="services-bar__title">
    test title
  </div>
  <div class="services-bar__services">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="services-bar__services">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="services-bar__services">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="services-bar__services">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>

这是jsfiddle：http://jsfiddle.net/yostrh8n/25/

Answer 4

如果我理解正确，则希望容器扩展到1024px以上。我假设1024px是父元素的宽度，这意味着您可以使用以下代码将子元素扩展到父元素之外。

width: 100vw;
margin-left: calc(50% - 50vw);

这会将宽度扩展到视口宽度（100vw-视口的100％）。问题在于，边距将设置为父元素的边距。要解决此问题，您必须使用左边距。为了响应，您需要使用calc。

如何使用flexbox设置容器的最大宽度？

4 个答案: