Use Flexbox Instead of Earlier Layout Models
May 7, 2025About 2 min
Use Flexbox Instead of Earlier Layout Models 관련
The Front-End Performance Optimization Handbook – Tips and Strategies for Devs
When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...
The Front-End Performance Optimization Handbook – Tips and Strategies for Devs
When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...
In early CSS layout methods, we could position elements absolutely, relatively, or using floats. Now, we have a new layout method called Flexbox, which has an advantage over earlier layout methods: better performance.
The screenshot below shows the layout cost of using floats on 1300 boxes:
Then we recreate this example using Flexbox:
Now, for the same number of elements and the same visual appearance, the layout time is much less (3.5 milliseconds versus 14 milliseconds in this example).
But Flexbox compatibility is still an issue, as not all browsers support it, so use it with caution.
Browser compatibility:
- Chrome 29+
- Firefox 28+
- Internet Explorer 11
- Opera 17+
- Safari 6.1+ (prefixed with -webkit-)
- Android 4.4+
- iOS 7.1+ (prefixed with -webkit-)
Reference:
Avoid large, complex layouts and layout thrashing | Articles | web.dev
Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.