Flex boxes align

#1

how to align 5 boxes using flex 4 at corners and fifth at center of them

#2

@manvi_1409 there are certain limitations to what flex can do, to achieve this kind of scenario where 4 boxes are at respective corners and 5th one is at the centre of the screen you have to change the display property of the divs to absolute, then you can place them anywhere you want on screen.

#3

@manvi_1409 css provides you several ways to arrange the elements on the DOM, each one has it’s own use case and application.
Please share your code which you have written for this kind of alignment.

#4

.par{

display:flex;

justify-content:center;

}

.child{

height:50px;

width:100px;

border:solid black 2px; 

margin:5px;

padding-top:20px;

font-size:25pt;

}

.par .c1{

align-self:flex-start;

}

.par .c2{

align-self:center;

}

.par .c3{

align-self:flex-end;

}

#5

@manvi_1409 DOM has a systematic ordering, one item is place after another, so if you want some Item to be placed with respect to the page/screen instead of one another you have to change the display property to absolute. Then you can achieve this.

#6

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.