首頁猿問在寫flex布局的時候，有辦法讓兩...

在寫flex布局的時候，有辦法讓兩個元素，一個靠左，一個居中嗎

JavaScript Html/CSS

茅侃侃 2018-09-08 09:40:52

在編寫css的遇到這種情況，兩個元素橫著排列，如圖中的箭頭和標(biāo)題，不知道flex是否可以讓他們一個靠右一個居中目前我使用的辦法是，父元素block 然后箭頭相對定位，標(biāo)題定寬并且margin 0 auto不知道大家有沒有什么好的辦法可以使用

查看完整描述

3 回答

MYYA

TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個贊

強(qiáng)用flex：在右側(cè)加一個區(qū)塊，形成結(jié)構(gòu) 箭頭---標(biāo)題----與箭頭等寬塊，這樣可以解決問題，有點(diǎn)不太優(yōu)雅。
采用絕對定位：把箭頭放于標(biāo)題塊中，箭頭相對于標(biāo)題塊絕對定位即可（推薦）

反對回復(fù) 2018-09-09

慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個贊

可以實(shí)現(xiàn)，給左側(cè)圖標(biāo)一個寬度，然后右側(cè)設(shè)置

flex: 1;text-align: center;

這樣中間文字偏右，也可以右側(cè)添加一個元素，但是隱藏。

反對回復(fù) 2018-09-09

慕仰8018949

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個贊

1、父元素設(shè)置text-align:center

2、文字部分設(shè)置flex:1

反對回復(fù) 2020-03-26

關(guān)注