Question

我使用flex获得了一些我的边缘的意外行为，我希望在理解原因方面有所帮助。

我有一些像这样简单的HTML：

<div className="dashboard">
    <div className="dashboard__inner-container">Inner Container</div>
</div>

我的scss文件看起来像这样：

.dashboard {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: #f4f6f8;
}

.dashboard__inner-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  width: 100%;
  margin: 100px 50px;
}

我期待的是内部容器将完全填满父容器，顶部和底部减去100px，右侧和左侧减去50px。垂直边距按预期工作，但水平边距实际上延伸到父div之外，因此内部容器似乎仍然占据父div的整个宽度。

我不确定这是否与flexbox有关。

这是一个孤立的CodePen https://codepen.io/MaxMillington2/pen/EQWZoj

Answer 1

在align-items: center方向使用column时，该项目将折叠为其内容宽度，而不是默认值stretch，这会使其填充其父级宽度。

此外，将width: 100%设置为inner时，它会覆盖默认的stretch，这会使该项目成为父级宽度+边距的100％。

对于预期的输出，请移除align-items: center上的outer和width: 100%上的inner。

Stack snippet

html {
  height: 100%;
  overflow: auto;
}

.outer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #f4f6f8;
  height: 100%;
}

.inner {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 1 1 auto;
  text-align: center;
  margin: 100px 80px;
}

<div class='outer'>
  outer
  <div class='inner'>
    inner
  </div>
</div>

水平边距在flexbox中超出父div

1 个答案: