如何应用边距以使元素不超过 100% 宽度？

Question

我有 this layout 并且我希望能够在每个元素周围添加一个 margin 但不改变 每个元素的宽度。

我知道，例如 header，我可以应用 margin: 10px;（让我们关注左右边距）和 width: calc(100% - 20px)从 100% 开始增加 20px 占边距。

问题:
有没有办法在不改变宽度的情况下做到这一点？

所以我可以保持 100% 的宽度，而不必担心我对元素应用了多少边距？

Answer 1

你可以玩 flex-grow。在您的情况下，您以这种方式定义了宽度：20% + 60% + 20% 即 20% + 3*20% + 20% 所以我们有这样的因素 1 + 3 + 1。因此，使用这些因素来设置 flex-grow 然后您可以轻松地根据需要添加保证金。

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  background: #333D4E;
}


/* Main */

main {
  display: flex;
  flex-direction: row;
  width: 100%;
  text-align: center;
}

article {
  flex-grow: 3;
  min-height: 800px;
  background: #EDF0F1;
  border-radius: 5px;
  margin: 0 20px;
}

nav {
  flex-grow: 1;
  order: -1;
  min-height: 800px;
  background: #9AA4A6;
  border-radius: 5px;
}

aside {
  flex-grow: 1;
  order: 1;
  min-height: 800px;
  background: #6295D6;
  border-radius: 5px;
}

<main>
  <article>Main Content</article>
  <nav>Side Nav</nav>
  <aside>Aside</aside>
</main>

同样适用于单个元素：

body {
  margin:0;
  display:flex;
}

.container {
  min-height:200px;
  flex-grow:1;
  margin:0 25px;
  background:red;
}

<div class="container">

</div>

所以诀窍是找到要使用的正确 flex-grow 值。

如何应用边距以使元素不超过 100% 宽度？

How can I apply margins so that elements don't exceed 100% width?

html

css

margin

width

flexbox