Discussion on: Share a quick tip you learned about web dev this year

[Kirill Shestakov]

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%);
}