Question

我在带有nowrap属性的<div>内有内容。我使用弹性框将内容垂直和水平对齐为中心。

由于我使用nowrap属性和固定宽度到我的<div>，因此我的内容在x和y方向的容器外溢出。我知道它会因为使用的属性而发生。

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

我想要解决方案而不添加额外的DOM。是否可能。

＆＃13;

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
}

＆＃13;

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

＆＃13;

另请参阅下面的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>

带有nowrap的柔性盒未正确对齐

1 个答案: