使用 flexbox 对齐项目

Question

以下是与 position: relative 和 position: absolute 一起正常工作的代码。但是，我正在尝试使用 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; }
.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

您应该更改 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>

Answer 2

您可以使用负边距调整重叠。将 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 3

如果你想达到同样的效果，但只使用 flexbox，我认为你做不到，但你需要像下面的代码一样使用 position with 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>

使用 flexbox 对齐项目

Alignment of item using flexbox

html

javascript

css

css-position

flexbox