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:
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: absolutecan 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. Withposition: absoluteyou 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: absoluteyou can center as well, although not as cleanly, but you can get used to it:Mistakes sometimes turn out to be gold !
Nice and thanks for sharing :)