Last summer, I wrote an article about CSS Grid. CSS Grid is a new web page layout module introduced in 2017. Today I'm writing about Flexbox, another new web page layout module released to new browsers in 20171. While CSS Grid is a two-dimensional system used to create rigid layouts, Flexbox is a one-dimensional system used to create flexible layouts with dynamic resizing of elements. Let's go over the basics!
Flexbox is a one-dimensional layout system that allows a container element's children to dynamically resize and order themselves based on their parents size2. Flexbox can be used to create vertical and horizontal layouts with one or many rows. While CSS Grid is better at creating rigid grids, Flexbox excels when items need to be dynamically resized. Along with CSS Grid, Flexbox was introduced in 2017.
Flexbox is currently supported by all major desktop and mobile browsers, covering 98.6% of online traffic (as of August 2019)3. It's browser integration is further along than CSS Grid, which covers 93.2% of online traffic.
Flexbox layouts consist of a flex container and one or more flex items. The parent element in a Flexbox layout is called a flex container. Flex containers contain the display: flex CSS declaration. Direct children of flex containers are called flex items. The next section walks through some simple Flexbox layouts.
I created a simple HTML blueprint called flex.html to help demonstrate Flexbox layouts. It displays a list of the top ten programming languages based on the number of lines I've coded in 2019. Here is the first Flexbox layout:
To create this layout, I used the following styles. I omitted all the styles for colors, backgrounds, and fonts.
I'm using Sass for my stylesheets to better represent the hierarchy of flex containers and flex items, along with the help of mixins and for loops. I also included CSS declarations with -ms- prefixes so that Flexbox can work with Internet Explorer4. IE versions 10 and 11 support an older spec of Flexbox which is specified with these prefixes.
The outer flex container specifies the y-axis as the main axis, so the languages are displayed vertically. Notice that you can align the flex items along the x-axis with the align-items attribute. Here is another layout which uses the x-axis as the main axis:
Here are the new styles for this layout:
flex-direction was altered from column to row in order to display the items horizontally. I made sure that the flex items went off the screen instead of moving onto the next line with the flex-wrap: nowrap declaration. In the flex item, I added new flex attributes which determine the size of the flex item. The next layout simply allows flex items to move onto the next line inside the flex container.
If you change the screen size with these styles applied, you will notice how the flex items move around and resize to find room. The following layout changes the way spacing is distributed around flex items and prohibits flex items from growing in size above their natural width:
In the final flex layout, I changed the ordering of the flex items so the languages are listed in reverse. I accomplished this with a Sass for loop. It loops over the flex items and gives them an order attribute. Otherwise the styles are the same as the previous layout.
Just like CSS Grid, Flexbox is a great new way to design website layouts. Since its available on all the major browsers nowadays, there is no excuse not to try it out! All the code from this article is available on GitHub.