首頁猿問使用 Flexbox 對齊項(xiàng)目

使用 Flexbox 對齊項(xiàng)目

JavaScript

DIEA 2023-10-14 18:58:21

position: relative以下是與和一起正常工作的代碼position: absolute。然而，我試圖使用Flexboxand 來實(shí)現(xiàn)類似的效果，盡管該項(xiàng)目在中心進(jìn)行了調(diào)整，但它并不像使用位置實(shí)現(xiàn)的那樣重疊。讓我知道如何使用Flexbox.代碼 -* { box-sizing: border-box; }.container { width: 300px; height: 300px; border: 1px solid black; }.green { background: #2a9d8f; }.blue { background: #333366; }/* Position CSS */.position-container { position: relative; }.box1, .box2 { position: absolute; }.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }/* Flexbox CSS */.flex-container { display: flex; align-items: center; justify-content: center; }.box3 { width: 60px; height: 60px; }.box4 { width: 40px; height: 40px; }<div class="container position-container"> <div class="box1 green"></div> <div class="box2 blue"></div> </div> <hr /> <div class="container flex-container"> <div class="box3 green"></div> <div class="box4 blue"></div> </div>

查看完整描述

3 回答

qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以使用負(fù)邊距來調(diào)整重疊。添加margin-left: -50px;以box4達(dá)到所需的輸出。

* { box-sizing: border-box; }

.container { width: 300px; height: 300px; border: 1px solid black; }

.green { background: #2a9d8f; }

.blue { background: #333366; }

/* Position CSS */

.position-container { position: relative; }

.box1, .box2 { position: absolute; }

.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }

.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }

/* Flexbox CSS */

.flex-container {

display: flex;

align-items: center;

justify-content: center;

}

.box3 { width: 60px; height: 60px; }

.box4 { width: 40px; height: 40px; margin-left: -50px; }

</div>

<hr />

</div>

反對回復(fù) 2023-10-14

長風(fēng)秋雁

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊

如果你想達(dá)到相同的效果但僅使用flexbox，我認(rèn)為你不能這樣做，但你需要將位置與flexbox一起使用，如下代碼所示：

* {

box-sizing: border-box;

}

.container {

width: 300px;

height: 300px;

border: 1px solid black;

}

.green {

background: #2a9d8f;

}

.blue {

background: #333366;

}

/* Position CSS */

.position-container {

position: relative;

}

.box1,

.box2 {

position: absolute;

}

.box1 {

width: 60px;

height: 60px;

left: 120px;

top: 120px;

}

.box2 {

width: 40px;

height: 40px;

left: 130px;

top: 130px;

}

/* Flexbox CSS */

.flex-container {

display: flex;

align-items: center;

justify-content: center;

}

.box3 {

width: 60px;

height: 60px;

position: absolute;

}

.box4 {

width: 40px;

height: 40px;

position: absolute;

}

</div>

<hr />

</div>

反對回復(fù) 2023-10-14

慕絲7291255

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

您應(yīng)該更改 HTML 并將藍(lán)色框放在綠色框內(nèi)。然后，為綠色框添加 css： .box3 { display: flex; align-items: center; justify-content: center; }

* { box-sizing: border-box; }

.container { width: 300px; height: 300px; border: 1px solid black; }

.green { background: #2a9d8f; }

.blue { background: #333366; }

/* Position CSS */

.position-container { position: relative; }

.box1, .box2 { position: absolute; }

.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }

.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }

/* Flexbox CSS */

.flex-container {

display: flex;

align-items: center;

justify-content: center;

}

.box3 { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }

.box4 { width: 40px; height: 40px; }

</div>

<hr />

</div>

反對回復(fù) 2023-10-14

3 回答
0 關(guān)注
145 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用 Flexbox 對齊項(xiàng)目

使用 Flexbox 對齊項(xiàng)目

3 回答

添加回答