css、flexの中央寄せ状態で文字列を左寄せ(行頭揃え)したい

Question

お世話になっています。
表題の通りリストを横表示させ中央寄せしたときに行頭を揃えることにつまづいています。
リストの縦表示は

.sample {
	margin: 16px auto;
	text-align: center;
	display: block;
	border: 1px solid #000;
}
.sample ul {
	padding-left: 0;
	list-style: none;
	display: inline-block;
}
.sample ul li {
	text-align: left;
}

こちらの方法で可能ですが横表示のやり方が見つけられませんでした。

該当のソースコード

<div class="sample">
	<ul>
		<li><span>あ</span></li>
		<li><span>あい</span></li>
		<li><span>あいう</span></li>
		<li><span>あいうえ</span></li>
		...more
	</ul>
</div>

ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	list-style: none;
}
.sample ul li {
	width: calc(90% / 2);
	border: 1px solid #000;
	/* text-align: left; */
}

試したこと

ul li span{
text-align: left;
border: 1px solid #000;
}

などで幅を取ろうとしましたが、そもそも文字列の長さが統一ではないので頓挫しました

わかる方、お力をお貸しいただければ幸いです。よろしくお願いいたします。m(_)m

*追記
リストは4つ固定ではなく縦に3行、4行と続くことが前提です。なおflexでなく、htmlの変更も構いません。ただ1行に2列か3列か、もしくはもっとか(calc(90% / 2)のことろ)は汎用性が必要です。
*回答を1ついただいて。
リスト親要素(ul)は中央寄せして、1行2列だと、左右の余白と中央の余白、この3つがなるべく等間隔になり、その上で行頭が揃うコードを望んでいます。
tomtomtomtomさんの回答だと子要素(li)内でテキストが左寄せになり、右の余白が大きくなり左の余白がなくなります。

求めるものがわかりづらくて申し訳ありません。

Comments

[hatena19]

HTMLの変更は可能ですか。
li要素の数は４で固定ですか。

[tonpoko]

指摘をありがとうございます。修正箇所を追記しました

[tomtomtomtom]

こちら無料奉仕で回答をしております。
追記のように書かれるのは、あまり良い気はしません。
誠に申し訳ありませんが、回答は削除依頼を出しました。
それでは失礼致します。

Answer 1

htmlの変更をしてもいいのなら、下記のように1列目と2列目を分割することになると思います。

<div class="sample">
  <ul>
    <li>
      <span>あ</span>
      <span>あいう</span>
    </li>
  </ul>
  <ul>
    <li>
      <span>あい</span>
      <span>あいうえ</span>
    </li>
  </ul>
</div>

.sample {
  display: flex;
}
.sample ul {
  padding-left: 0;
  list-style: none;
  border: 1px solid #000;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sample ul li {
  display: flex;
  flex-direction: column;
  text-align: left;
}

htmlの変更なしでなら、jsで<li>の最大幅を取得して、それをすべての<li>の幅に設定するというような方法にするしか思いつかないです。

Comments

[tonpoko]

回答をありがとうございます。お答え頂いたコードで望んだ状態で表示されています。いまhtmlを変更しない方法など試しているので、ベストアンサーは今しばらくお待ち下さい。ありがとうございました。

Answer 2

position:absolute と spanに横幅を持たせることで強引に中央寄せにしました。
質問の仕方が悪くご迷惑をおかけしました。申し訳ありません。

.sample ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sample ul li {
	position: relative;
	width: calc(90% / 2);
	min-height: 2.5em;
	border: 1px solid #000;
}
.sample ul li span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 50%; /* フレキシブルで変更 */
}