不能使用换行文本居中元素，因为文本环绕将父级设置为 100% 宽度

Question

我遇到了换行文本的问题。

我希望我的项目内容居中(我已经用justify-content: center;做到了(

但当文本换行时，我希望文本向左对齐。

但是，当文本进行换行时，父元素的宽度将自动为100%。因此，当文本左对齐时，内容看起来并不是居中的，因为它不可能真正以100%的宽度居中。

我希望这有道理！！

任何帮助都会很棒！

以下是我的问题：https://jsfiddle.net/whqbonad/38/

.container {
width: 300px;
margin: 0 auto;
}
.item {
width: 50%;
float: left;
background: #e3e3e3;
margin: 10px 0;
padding: 20px;
box-sizing: border-box;

display: flex;
justify-content: center;
}

<div class='container'>
<div class='item'>
<span>Hello 1</span>
</div>
<div class='item'>
<span>Hello 2</span>
</div>
<div class='item'>
<span>Hello 3</span>
</div>
<div class='item'>
<span>Hello 4</span>
</div>
<div class='item'>
<span>Hello 5</span>
</div>
<div class='item'>
<span>Hello but longer!</span>
<!-- I want this to be centered, but the text be left aligned -->
</div>
</div>

Answer 1

此代码正常工作

.container {
width: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
.item {
flex-basis: 50%;
background: #e3e3e3;
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
span {
display: block;
width: 80%;
background: red;
text-align: left;
height: 100%;
}

<div class='container'>
<div class='item'>
<span>Hello 1</span>
</div>
<div class='item'>
<span>Hello 2</span>
</div>
<div class='item'>
<span>Hello 3</span>
</div>
<div class='item'>
<span>Hello 4</span>
</div>
<div class='item'>
<span>Hello 5</span>
</div>
<div class='item'>
<span>Hello but longer!</span>
</div>
</div>