loading...

re: Share a quick tip you learned about web dev this year VIEW POST

FULL DISCUSSION
 

This was learnt from my own mistake. Don't use flexbox for everything. If you do, there's performance and code clarity considerations. Think about whether position: absolute can solve the problem just as well.

 

When would you prefer position: absolute over flexbox? For centering/aligning I almost allways use flexbox, also over text-align: center. Absolute positioning I use for pseudo elements or floating alerts for example.

 

My logic is, if something can be done with position: absolute, do it with it. Otherwise, flexbox is ok. With position: absolute you have a lot of freedom: you can center, you can put the element almost anywhere you want and make it behave like you want based on screen size. I think absolute position is often underused. Flexbox, although flexible, might get a bit complicated and will likely reduce your performance. I created a WYSIWYG editor once, whose ancestors were all flexbox. Remember, flexbox has to relayout and repaint if any of its content changed. So, because of that, if you had a lot of content, editing it was unbearably slow and laggy after typing every character.

With position: absolute you can center as well, although not as cleanly, but you can get used to it:

.element {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}
 

Mistakes sometimes turn out to be gold !
Nice and thanks for sharing :)

code of conduct - report abuse