使用 Flexbox 对齐项目

Question

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>

Answer 1

您可以使用负边距来调整重叠。添加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 {&nbsp;&nbsp; display: flex;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp; justify-content: center;&nbsp;}.box3 { width: 60px; height: 60px; }.box4 { width: 40px; height: 40px; margin-left: -50px; }<div class="container position-container">&nbsp; &nbsp; <div class="box1 green"></div>&nbsp; &nbsp; <div class="box2 blue"></div>&nbsp; </div>&nbsp; <hr />&nbsp; <div class="container flex-container">&nbsp; &nbsp; <div class="box3 green"></div>&nbsp; &nbsp; <div class="box4 blue"></div>&nbsp; </div>

Answer 2

如果你想达到相同的效果但仅使用flexbox，我认为你不能这样做，但你需要将位置与flexbox一起使用，如下代码所示：* {&nbsp; box-sizing: border-box;}.container {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; border: 1px solid black;}.green {&nbsp; background: #2a9d8f;}.blue {&nbsp; background: #333366;}/* Position CSS */.position-container {&nbsp; position: relative;}.box1,.box2 {&nbsp; position: absolute;}.box1 {&nbsp; width: 60px;&nbsp; height: 60px;&nbsp; left: 120px;&nbsp; top: 120px;}.box2 {&nbsp; width: 40px;&nbsp; height: 40px;&nbsp; left: 130px;&nbsp; top: 130px;}/* Flexbox CSS */.flex-container {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}.box3 {&nbsp; width: 60px;&nbsp; height: 60px;&nbsp; position: absolute;}.box4 {&nbsp; width: 40px;&nbsp; height: 40px;&nbsp; position: absolute;}<div class="container position-container">&nbsp; <div class="box1 green"></div>&nbsp; <div class="box2 blue"></div></div><hr /><div class="container flex-container">&nbsp; <div class="box3 green"></div>&nbsp; <div class="box4 blue"></div></div>

Answer 3

您应该更改 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 {&nbsp;&nbsp; display: flex;&nbsp;&nbsp; align-items: center;&nbsp;&nbsp; justify-content: center;&nbsp;}.box3 { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }.box4 { width: 40px; height: 40px; }<div class="container position-container">&nbsp; &nbsp; <div class="box1 green"></div>&nbsp; &nbsp; <div class="box2 blue"></div>&nbsp; </div>&nbsp; <hr />&nbsp; <div class="container flex-container">&nbsp; &nbsp; <div class="box3 green">&nbsp; &nbsp; &nbsp; <div class="box4 blue"></div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; </div>