以最大宽度居中内容且不使用边距答案

【问题标题】：Centering Content With Max Width and Without Using Margins以最大宽度居中内容且不使用边距
【发布时间】：2020-01-17 14:09:14
【问题描述】：

我需要将一组孩子放在一个容器中。

我的要求是：

每个孩子的左右都需要一个排水沟。
我无法在容器上设置边距或填充。
我无法为子项设置内边距，但我可以设置边距。
每个孩子的左右都应该有一个空间/排水沟。
每个孩子可以有不同的最大宽度集。
如果孩子的最大宽度大于容器宽度，它应该占据整个宽度（减去它的间距）。
如果子元素比容器窄，它应该居中。我认为我可以使用 flexbox 实现这一点，因为 align-items: stretch; 尊重最大宽度，但它不会使孩子居中。

我不能使用margin: 0 auto;，因为我需要使用孩子们的边距来设置他们左右的排水沟。

这是我使用 flexbox 的尝试：

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  max-width: 600px;
  outline: 1px dashed black;
  box-
}

section {
  min-height: 40px;
  margin-left: 20px;
  margin-right: 20px;
}

section + section {
  margin-top: 20px;
}
  
.s1 {
  background-color: red;
  max-width: 100px
}
  
.s2 {
  background-color: blue;
  max-width: 200px
}
  
.s3 {
  background-color: green;
  max-width: 300px
}

<main>
  <section class='s1'></section>
  <section class='s2'></section>
  <section class='s3'></section>
</main>

有什么方法可以可靠地实现我的目标吗？

【问题讨论】：

标签： css layout flexbox constraints

【解决方案1】：

是的，尽管您需要给 section 一个宽度，并使用 align-items: center

要在孩子达到其父母的宽度时保留排水沟，您可以使用CSS calc()，并执行例如width: calc(100% - 40px);，并且由于较窄的孩子总是居中，您应该也可以删除 margin-left/right（如果，您将能够使用自动边距）。

请注意，如果不使用 safe 关键字，请使用 align-items: center can cause overflow issues，并使用 auto margins 解决了比 safe 更跨浏览器的问题。

堆栈sn-p

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
  outline: 1px dashed black;
}

section {
  width: calc(100% - 40px);
  min-height: 40px;
  margin-left: 20px;
  margin-right: 20px;
}

section + section {
  margin-top: 20px;
}
  
.s1 {
  background-color: red;
  max-width: 100px
}
  
.s2 {
  background-color: blue;
  max-width: 200px
}
  
.s3 {
  background-color: green;
  max-width: 700px
}

<main>
  <section class='s1'></section>
  <section class='s2'></section>
  <section class='s3'></section>
</main>

如果您能够降低固定边距，以下是使用自动边距的方法。

堆栈sn-p

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 600px;
  outline: 1px dashed black;
}

section {
  width: calc(100% - 40px);
  min-height: 40px;
  margin: 0 auto;
}

section + section {
  margin-top: 20px;
}
  
.s1 {
  background-color: red;
  max-width: 100px
}
  
.s2 {
  background-color: blue;
  max-width: 200px
}
  
.s3 {
  background-color: green;
  max-width: 700px
}

<main>
  <section class='s1'></section>
  <section class='s2'></section>
  <section class='s3'></section>
</main>

【讨论】：

@SudiptoRoy 也许...我可能看错了，使用calc(100% - gutter) 可以解决这个问题

【解决方案2】：

如果你用width 替换你的孩子的max-width，你可以实现你想要的。但我不知道做这个改变是否有任何限制。

将这些规则添加到所有部分

section {
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

如果您将.s1, .s2 and .s3 的max-width 替换为width，则可以完全省略main 的样式规则。

【讨论】：