Question

我有 this layout ，我希望能够在每个元素周围添加边距但不更改宽度每个元素。

我知道，例如使用header，我可以应用margin: 10px;（让我们专注于左边距和右边距）和width: calc(100% - 20px)，它可以带走20px 100％来计算保证金。

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

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

Answer 1

您可以使用flex-grow。在您的情况下，您可以通过以下方式定义宽度：20% + 60% + 20%，20% + 3*20% + 20%，因此我们有1 + 3 + 1之类的因素。因此，请使用这些因素设置flex-grow，然后您可以轻松添加您想要的保证金。

＆＃13;

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

＆＃13;

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

＆＃13;

同样适用于单个元素：

＆＃13;

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

＆＃13;

<div class="container">

</div>

＆＃13;

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

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

1 个答案: