javascript - 带有 nowrap 的 Flex 盒子没有正确对齐

Question

我在 <div> 中有内容具有 nowrap 属性。我正在使用 flex box 将内容垂直和水平对齐到中心。

因为我在 <div> 上使用了 nowrap 属性和固定宽度，我的内容溢出容器外的 x 和 y 方向。我知道这会因为所使用的属性(property)而发生。

我的意图是，如果内容太长而容器无法容纳，则它应该左对齐而不是居中对齐，并且只能在 Y 方向溢出。

我想要不添加额外 DOM 的解决方案。有没有可能。

div{
  width:330px;
  margin:0 auto;
  height:50px;
  border:1px solid #a7a7a7;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  white-space:nowrap;
  position:relative
}

<div>
  Delete some content so that you can see it aligned properly
</div>

另请参阅 fiddle下面

以前这在 display:-webkit-box 中是可能的，因为它已被弃用我正在尝试在 flex 中找到解决方案。引用here

Answer 1

只需将 justify-content 更改为 flex-start;:

div{
  width:330px;
  margin:0 auto;
  height:50px;
  border:1px solid #a7a7a7;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  white-space:nowrap;
  position:relative
}

<div>
  Delete some content so that you can see it aligned properly
</div>

更新

根据您的评论，如果您将框更改为 inline-flex，您可以将 div 居中，然后在其上设置最大宽度，使其居中，但在达到最大宽度时左对齐:

body {
  text-align: center;
}
div {
  max-width: 330px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  position: relative
  box-sizing:border-box;
}
div:after {
  content: '';
  display: block;
  width: 330px;
  height: 50px;
  border: 1px solid #a7a7a7;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  box-sizing:border-box;
}

<div>
  Delete some content so that you can see it aligned properly
</div>
<br>
<div>
  you can see it aligned properly
</div>