我正在嘗試對(duì)齊包含3個(gè)內(nèi)容塊的頂部菜單。我想要實(shí)現(xiàn)的是：塊1：左對(duì)齊塊2：水平居中塊3：右對(duì)齊如果所有3個(gè)塊的大小都相同，則可以使用flexbox（如代碼段中所示），但它們不是，所以不會(huì)產(chǎn)生我需要的輸出。相反，flexbox在3個(gè)塊之間放置了相等的空間-導(dǎo)致中間塊偏離中心對(duì)齊。我想知道這是否可以使用flexbox來實(shí)現(xiàn)，如果不能，則可以采用另一種解決方案。這需要在生產(chǎn)中穩(wěn)健地工作，因此由于支持不足，因此不適用“網(wǎng)格”解決方案。.container { margin: 20px 0;}.row { background-color: lime; display: flex; justify-content: space-between;}.item { background-color: blue; color: #fff; padding: 16px;}<div class="container"> <div class="row"> <div class="item">left, slightly longer</div> <div class="item">center, this item is much longer</div> <div class="item">right</div> </div></div>
2 回答
jeck貓
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
您可以考慮flex-grow:1;flex-basis:0%使用left和right元素，然后text-align在其中對(duì)齊內(nèi)容。我添加了一個(gè)額外的包裝程序，以僅在文本周圍保留背景。
訣竅是通過僅刪除中間內(nèi)容并將其均分為左元素和右元素來計(jì)算可用空間。
.container {
margin: 20px 0;
padding-top:10px;
background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
}
.row {
background-color: lime;
display: flex;
color: #fff;
}
.item:not(:nth-child(2)) {
flex-basis: 0%;
flex-grow: 1;
}
.item:last-child {
text-align: right;
}
.item span{
background-color: blue;
display:inline-block;
padding: 16px;
height:100%;
box-sizing:border-box;
}
<div class="container">
<div class="row">
<div class="item"><span>left, slightly longer</span></div>
<div class="item"><span>center, this item is much longer</span></div>
<div class="item"><span>right</span></div>
</div>
</div>
您也可以通過使元素保持關(guān)閉來執(zhí)行相同的操作。只需調(diào)整文本對(duì)齊即可：
.container {
margin: 20px 0;
padding-top:10px;
background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
}
.row {
background-color: lime;
display: flex;
color: #fff;
}
.item:not(:nth-child(2)) {
flex-basis: 0%;
flex-grow: 1;
}
.item:first-child {
text-align: right;
}
.item span{
background-color: blue;
display:inline-block;
padding: 16px;
height:100%;
box-sizing:border-box;
}
<div class="container">
<div class="row">
<div class="item"><span>left, slightly longer</span></div>
<div class="item"><span>center, this item is much longer</span></div>
<div class="item"><span>right</span></div>
</div>
</div>
慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
您能否給flex-grow：1作為商品類別并檢查
.item {
background-color: blue;
color: #fff;
padding: 16px;
flex-grow:1;
}
希望這是您要尋找的
添加回答
舉報(bào)
0/150
提交
取消