使用 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 { 

  display: flex; 

  align-items: center; 

  justify-content: center; 

}

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

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

<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 2

如果你想达到相同的效果但仅使用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 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 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 { 

  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 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 class="box4 blue"></div>      

    </div>

  </div>