CSS 中的固定列布局

Question

该网站如何能够将内容“向内”推入页面而没有边距。 在我看来，它们具有单列固定布局，但我不明白这是如何完成的。 也许用 flexbox？

使屏幕截图中的标签具有如此小的宽度的 CSS 代码是什么？ 我添加了一些红色箭头来突出我的意思。 基本上，从浏览器的最左侧到标签似乎没有边距，尽管有一些东西可以将内容保存在页面的中心。

Answer 1

他们使用一个名为 widecontainer 的容器，其样式如下

.widecontainer {
   position: relative;
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 20px;
}

这是网站的常见做法，我在我的网站中使用边距容器，代码如下

.margins-container {
    width: 85%;
    max-width: 1244px;
    margin: 0 auto 0 auto;
    @media (max-width: $tablet) {
         margin: 0 auto 20px auto;
     width: 95%;
     }
    &.no-margin {
        margin: 0 auto;
    }
    &.constrained {
        width: 85%;
    }
}

在每个新部分中，它们将包含边距容器以确保网站保持在相同的约束范围内，但同时可以通过样式设置一个选择器进行调整。

使用像这样的边距容器通常会遵循这种格式

<section class="main-content">
  <div class="margins-container">
    // content
  </div>
</section>
<section class="secondary-content">
  <div class="margins-container">
    // secondary content
  </div>
</section>