首頁猿問使用 Flexbox 對齊項目

使用 Flexbox 對齊項目

JavaScript

DIEA 2023-10-14 18:58:21

position: relative以下是與和一起正常工作的代碼position: absolute。然而，我試圖使用Flexboxand 來實現類似的效果，盡管該項目在中心進行了調整，但它并不像使用位置實現的那樣重疊。讓我知道如何使用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貢獻1725條經驗獲得超8個贊

您可以使用負邊距來調整重疊。添加margin-left: -50px;以box4達到所需的輸出。

* { 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>

反對回復 2023-10-14

長風秋雁

TA貢獻1757條經驗獲得超7個贊

如果你想達到相同的效果但僅使用flexbox，我認為你不能這樣做，但你需要將位置與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>

反對回復 2023-10-14

慕絲7291255

TA貢獻1859條經驗獲得超6個贊

您應該更改 HTML 并將藍色框放在綠色框內。然后，為綠色框添加 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>

反對回復 2023-10-14

3 回答
0 關注
148 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Flexbox 對齊項目

使用 Flexbox 對齊項目

3 回答

添加回答