Question

我希望制作section元素，其最大宽度为1000px，余量为1rem，当用户调整大小低于任何宽度时，该元素会持续存在。< / p>

main {
    align-items: center;
    background: #eee;
    display: flex;
    flex: 1;
    flex-grow: 1;
    flex-flow: column nowrap;
}

section {
    align-self: stretch;
    background: #fff;
    display: flex;
    margin: 1rem;
    max-width: 1000px;
}

不幸的是，在我尝试调整此问题时，有三个结果：

我有一些正确的中心，最大宽度为1000px，但边缘不会持久，因为我使用的是1rem auto。
我有一些中心但没有尝试调整元素的大小。
我的东西宽度正确且边距保持不变，但它是左对齐的。

我不确定除了使用@media块之外如何使其工作，这是不可靠的，因为我使用rem单位作为边距。< / p>

Answer 1

您可以使用width: calc(100% - 2rem);

Fiddle demo

Stack snippet

main {
    align-items: center;
    background: #eee;
    display: flex;
    flex: 1;
    flex-grow: 1;
    flex-flow: column nowrap;
}

section {
    background: #f00;
    display: flex;
    margin: 1rem;
    width: calc(100% - 2rem);
    max-width: 1000px;
}

<main>
  <section>
    Section
  </section>
</main>

水平居中，边距和最大宽度

1 个答案: