Even though Flexbox is currently in the W3C candidate recommendation stage (meaning it is yet to be finalized and has limited browser support), it’s still important to understand what all it can do. This article provides an introduction to Flexbox, including its main features and how it can be used.
Flexbox overviewFlexbox takes CSS layout to the next level, providing more advanced control over the elements in a website layout. As its name implies, the key feature of Flexbox is indeed flexibility. It provides an easier way for elements to adapt to their containing element, allowing the alignment, wrapping, and order of elements to be quickly adjusted.
Flexbox eliminates the need to use floats and other display properties in order to arrange elements on a page. It introduces a new set of CSS properties that can be used to control layout. These new properties can be enabled simply by adding display: flex to an element.
Let’s take a look at some examples of the most useful Flexbox properties.
Alignment: Flexbox can be used to quickly align elements with it’s justify-content property. The example below shows how the same navigation links can be aligned in multiple ways. Perfectly centering content can sometimes be challenging using CSS, but Flexbox makes it as simple as changing a property value.
Direction: The flex-direction property provides advanced control over the direction of elements. It can be used to arrange elements into rows or columns, or to reverse the order of elements within a container.
Order: Flexbox allows the elements on a website to be re-ordered without altering the website’s HTML, which is one of its most attractive features. This can be done using the order property. The higher the number of the order property, the lower on the page an element appears. In the example below, the navigation starts off at the top of the page. By changing the order property of the navigation, it moves below the content. This is especially useful for responsive websites, so elements can be easily shifted in order of importance.
This is just a brief overview of what you can accomplish with Flexbox. To dive deeper into Flexbox properties, check out the Complete Guide to Flexbox.