Question

我有以下代码：

.ai-container,
.ai-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.ai-overlay {
  background-color: black;
  opacity: .2;
  z-index: 1000;
}
.ai-dialog {
  z-index: 1001;
  display: flex;
  flex-direction: column;
  border: 1px solid darkgray;
  border-radius: 5px;
  background-color: white;
  min-width: 300px;
  box-shadow: 0px 0px 15px #444;
  overflow: hidden;
}
.ai-header,
.ai-footer,
.ai-body {
  padding: 10px;
}
.ai-header {
  background-color: hsl(0, 0%, 20%);
  color: white;
  display: flex;
  font-size: 1.1em;
  justify-content: space-between;
}
.ai-footer {
  display: flex;
  background-color: lightgray;
  justify-content: space-between;
}

<div class="ai-container">
  <div class="ai-overlay"></div>
  <div class="ai-dialog">
    <div class="ai-header">
      <span>This is the header</span>
      <span>X</span>
    </div>
    <div class="ai-body">This is the body</div>
    <div class="ai-footer">
      <span>
          <button>Submit</button>
          <button>Lookup</button>
      </span>
      <button>Cancel</button>
    </div>
  </div>
</div>

您可以在此处查看结果：http://plnkr.co/edit/5SOxkMV9qQ86m6d2jyT0?p=preview

然而，生成的“对话框”被拉伸以填充整个垂直空间。

如果我有flex-grow: 1，我会期待这一点，但我没有。

如果您将以下内容添加到css：

.ai-container, .ai-overlay {
    ... /*all the previous settings */
    align-items: center;
}

然后对话框看起来像我期望的那样......足够高以适应内容。我假设删除align-items只会将对话框移动到浏览器窗口的顶部而不影响高度。

我在这里缺少什么？

Answer 1

我认为删除align-items只会将对话框移动到浏览器窗口的顶部，而不会影响高度。

你很亲密。您假设默认值align-items为flex-start。实际上，默认值为stretch。

这意味着弹性项目将始终展开以覆盖容器横轴的整个长度，除非覆盖初始设置。

您可以使用align-items: flex-start，center等覆盖默认值

以下是一些详细信息： How to disable equal height columns in Flexbox?

为什么flex项目在没有flex-grow的情况下扩展全高？

1 个答案: