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

re: 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 ...

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%);
Code of Conduct Report abuse