[解決済み】横のアイテムの幅が異なる場合、真ん中のアイテムを中央に配置する方法

質問

次のようなレイアウトを想像してください。ドットはボックスとボックスの間のスペースを表しています。

[Left box]......[Center box]......[Right box]

右のボックスを削除しても、中央のボックスが残っているのがいいんです、こんな風に。

[Left box]......[Center box].................

左のボックスを削除する場合も同様です。

................[Center box].................

これで、中央のボックス内のコンテンツが長くなっても、中央に配置されたまま、必要なだけのスペースを確保することができるようになりました。左右のボックスは決して縮小されないので、スペースがなくなったときに overflow:hidden と text-overflow: ellipsis が有効になり、コンテンツが壊れます。

[Left box][Center boxxxxxxxxxxxxx][Right box]

上記はすべて私の理想とする状況ですが、この効果を達成する方法が全く分かりません。なぜなら、私がこのようなフレックス構造を作成すると

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

左右のボックスがまったく同じサイズであれば、望ましい効果が得られます。しかし、2 つのうち 1 つが異なるサイズである場合、中央揃えボックスは真の中央揃えではなくなります。

どなたかお手伝いいただける方はいらっしゃいませんか？

更新情報

A justify-self がいい、これが理想です。

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

解決方法は？

左右のボックスが全く同じ大きさであれば、期待通りの効果が得られます。しかし、2つのうち1つが異なるサイズである場合、中央揃えボックスはもはや真の中央揃えではありません。私を助けることができるだれかありますか。

フレックスボックスを使用して、兄弟の幅に関係なく、真ん中のアイテムを中央に配置する方法を紹介します。

主な特徴

• ピュアCSS
• 絶対位置指定なし
• JS/jQueryなし

ネストしたフレックスコンテナを使用し auto のマージンです。

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > span { margin-right: auto; }

.box:last-child  > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
p {
  text-align: center;
  margin: 5px 0 0 0;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>&#8593;<br>true center</p>

その仕組みはこうです。

• トップレベルのdiv( .container ) は、フレックスコンテナです。
• それぞれの子 div ( .box ) がフレックスアイテムになりました。
• 各 .box の項目には flex: 1 コンテナスペースを均等に配分するため ( 詳細 ).
• これで、項目は行内のすべてのスペースを消費し、幅も同じになりました。
• 各アイテムを（ネストされた）フレックスコンテナにし、その上に justify-content: center .
• これで各 span 要素は中央揃えのフレックスアイテムです。
• フレックスを使用する auto マージンを使って、外側の span