flex problem aligning 2 childs in the center and on the right of the parent

Question

I have the following html:

<div id="box">
   <div class="test1">
     test1
   </div>
   <div class="test2">
     test2
   </div>   
</div>

Now i want to align the div with class test1 in the center of the parent (id="box") (on main axis) and align test2 on the right of the parent. Can anyone tell me if this is possible with flex or do i need something else? The html is fixed and it can't be changed. i want to solve it with this structure.

here is a js fiddle that solves it but i need to add a 3rd div inside the parent: http://jsfiddle.net/kp1tzcry/54/ This is not what i want. Also i realy want to solve it with flex. i know i can use margin auto and float right (don't want to do that if not needed)

@MattHamer5 doesn't solve the problem. both childs would just float in the center of the cross axis. i want something different — Xeratas, Jul 07 '21 at 12:47

Haseeb Hassy · Answer 1 · 2021-07-07T13:14:49.927

0

Adding align-items: center to your #box will solve your issue, however, your current structure may cause issues in responsive screens.

#box {
  background: #000;
  color: #fff;
  height: 100px;
  cursor: pointer;
}

#box div {
  width: 50%;
  float: left;
  text-align: right;
}

<div id="box">
  <div class="test1">
    test
  </div>
  <div class="test2">
    test2
  </div>
</div>

Edit: Use width: 50% along with float: left

edited Jul 07 '21 at 13:14

answered Jul 07 '21 at 12:47

Haseeb Hassy

522
8
20

Looks like i expressed myself wrong. I don't want to align them in the cross axis. I want exactly what my jsfiddle example does but without the div with the class test0. I only want 2 childs in the parent not 3 – Xeratas Jul 07 '21 at 12:53
I have updated the code – Haseeb Hassy Jul 07 '21 at 13:15

score 0 · Accepted Answer · answered Jul 07 '21 at 13:07

You can acheive this using display:block and senting position parent to relative

Here is an exemple

#box {
  display: block;
  position:relative;
  background-color: lightgrey;
}

.test {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
}



.test1 {
margin:auto;

}


.test2 {
     position: absolute;
    top: 0;
bottom:0;
    right: 0;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="box">
   <div class="test test1">
     test1
   </div>
   <div class="test test2">
     test2
   </div>   
</div>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-self by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:03:00 GMT -->
</html>

Thanks. i guess something like that is my only chance. Guess i can only solve it with display: grid or some position absolut stuff like you suggested — Xeratas, Jul 07 '21 at 13:31

flex problem aligning 2 childs in the center and on the right of the parent

2 Answers2