次のようなレイアウトを想像してください。ドットはボックス間のスペースを表します。
[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;
}
ベストアンサー1
左と右のボックスがまったく同じサイズであれば、望みどおりの効果が得られます。しかし、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>↑<br>true center</p>仕組みは次のとおりです:
- 最上位の div (
.container) は flex コンテナーです。 - 各子 div (
.box) はフレックス アイテムになりました。 - 各アイテムはコンテナスペースを均等に分配するために
.box与えられます（flex: 1詳細はこちら）。 - これで、アイテムは行内のすべてのスペースを占め、幅が均等になりました。
- 各項目を (ネストされた) フレックス コンテナーにして、 を追加します
justify-content: center。 - これで、各
span要素は中央に配置されたフレックス アイテムになりました。 - フレックス
autoマージンを使用して、外側の要素をspan左右にシフトします。
justify-contentマージンのみを使わずに使用することもできますauto。
しかし、マージンは常に優先されるjustify-contentため、ここでは機能できます。auto
および による位置合わせの前に
justify-content、align-self正の空きスペースはその次元の自動マージンに分配されます。