Return to Home Page...

CSS Flex

CSS-Tricks

CSS-Tricks serves as a great resource to learn about flexbox, as it covers the basics, common uses, and all properties that can be used to modify the flex container, as well as the flex child. The visuals for each attribute make it extremely easy to understand what each one does. Not to mention, there is more information to users available regarding flexbox, and several user examples that others can utilize.

CSS-Tricks

W3Schools

While not providing a vast amount of information in regards to flexbox, unlike CSS-Tricks, W3Schools does allow users modify pre-existing code on the site that is then shown in example areas. Otherwise, the site is pretty much similar to the one before. There are separate links to flexbox specific properties that users can use to learn more. The main difference between this site and the last is the plentiful examples of 'Try It Yourself' features.

W3Schools

Mozilla Developer Network

The Mozilla Developer Network (MDN) provides great background information on the flexbox, before diving into the deep end of how it works. It goes into great detail in the two axes in a flex box, the flex container and some basic properties that go along with it, and the properties that go along with flex items. There are several example areas where users can modify code on screen to see how it updates the flexbox and content above.

MDN

Summary

While CSS-Tricks, W3Schools, and the MDN provide a great amount of information regarding the flexbox, such as properties of the flex container and items, there are numerous other websites that also go into detail of how a flexbox works, and several examples and configurations to design one in a particular way.