Alignment of item using flexbox

Question

Following is the code which is working fine with position: relative and position: absolute. However I am trying to achieve similar effect using Flexbox and though the item is adjusted in the center but it is not overlapping like the one achieved using position. Let me know how can I achieve the similar effect using Flexbox.

Code -

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

See here: https://stackoverflow.com/questions/43919067/make-flex-items-overlap — AbsoluteBeginner, Dec 06 '20 at 19:29

score 1 · Accepted Answer · edited Dec 06 '20 at 19:11

You can use negative margins to adjust the overlapping. Add margin-left: -50px; to box4 to achieve the desired output.

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

score 0 · Answer 2 · answered Dec 06 '20 at 19:00

You should change HTML and put the blue box inside the green one. Then, add css for green box: .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>

score 0 · Answer 3 · answered Dec 06 '20 at 19:07

if you want to make the same effect but using flexbox only, I don't think you can do that but you need to use position with flexbox like code below:

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

Alignment of item using flexbox

3 Answers3