An Introduction to Flexbox in CSS.
Understanding the quirks of flexbox.
CSS is the bane of many developers’ existence, as evidenced by this query on reddit.
But CSS doesn’t really deserve the bad rap that it gets! Although everybody’s reasoning is different, the general consensus is that CSS is hard because it behaves weirdly. One such concept which scares off most beginners, is that of flexbox. But as you go through this article, it will become apparent to you that flexbox is actually a pretty easy concept to comprehend!
Simply put, flexbox is tool to build layouts. It provides a cross browser-compatible method to implement layouts and makes it easier to add responsive design to your application, without you having to explicitly deal with positioning the components of your page.
The only prerequisite to learn flexbox is CSS selectors. In case you need to brush up on CSS selectors, you can go through the following article.
Just like the box model in CSS, there is something called the flex model, which can help you visualize the layout a lot better.
The main principle of the flex model is that all its content is laid out along two axes, namely a main axis and a cross axis. By default, the main axis refers to the x-axis or the horizontal axis. Likewise, the cross axis refers to the y-axis or the vertical axis.
You might be aware that an outer container acts as parent element, and all the elements nested within a container will act as child elements. In the flex model, this parent element is called a flex container and all its children are called flex items.
The following image gives a concise explanation of the flex model:
Consider the following HTML code, wherein we have a flex container and 4 flex items nested within it.
Now, if we select
flex-container and set its
display property to
flex, all the default flexbox properties are applied to it, as illustrated below.
Let’s take a look at the different properties that are applied when an element’s
display property is set to be
- flex-direction:This property sets the direction for the main axis and by default, it is set as row. The other options include reverse-row, column, and reverse-column. The following image shows the difference between these four values.
- flex-wrap: Wrapping refers to the process of distributing the flex items over multiple lines. This property is set to nowrap by default, as flexbox will try to position all the flex items onto the main axis. The options available under this property are wrap, wrap-reverse, and nowrap.
- flex-flow: This is a shorthand property to set the previous 2 properties at once. The order of the properties is
flex-flow: flex-direction flex-wrap. The default value is row nowrap.
Up until now, all the properties I listed were used to either set the direction of the main axis, or to allow flex items to be distributed over multiple lines. The following properties are responsible for the alignment of the flex items within the flex container.
- justify-content: This property sets the alignment along the main axis. By default, its value is set to flex-start. But there are many more options which will help in the construction of the desired layout, as listed below:
- align-items: This property is used to align the flex items along the cross axis. By default, this property is set to stretch, which indicates that the flex items will fill the container (along the cross axis, of course). Like the ‘justify-content’ property, this too has other options to align the flex items, as illustrated below.
- align-content: This is used to align the flex-container’s lines within the container, only when there is extra space in the cross-axis. This is similar to justify-content, but it works on an entire line of flex-items, rather than individual items. The following image illustrates the options available in align-content.
Note that align-content will have no effect on your layout in case your main axis has a single line of flex items.
Now, let us take a look at the properties that can be applied to the flex items, which are nested within the flex container.
- The ‘order’ property is used to override the default order of the flex items. The default is the order in which they appear in the HTML source. Its value can be set using an integer as seen in the image below.
- The align-self property is used to set the alignment of individual flex items, along the cross axis. This property will override the alignment set by the ‘align-items’ property.
The options that are available in this property are the same as those of align-items and the default is set as
- Lastly, there is property called flex, which is a shorthand responsible for setting the flex-grow, flex-shrink and flex-basis properties. You can find a detailed explanation of this sub-property in the following resource.
Now that you know the basics of flexbox, the next hurdle to overcome is to be able to construct layouts using flexbox.
The following resource provides examples of some common layouts found in most modern websites.
Common CSS Flexbox Layout Patterns with Example Code
In theory, it's pretty straightforward to use flexbox (Flexible Box Module) to build complex layouts, but I've often…
But, in case you want to be able to build your very own layout, the best method to practise is by converting a PSD template into a CSS file. This means replicating PSD templates using just CSS flexbox! Doing this will help you instantly spot common design patterns which can be achieved using flexbox, which will in turn strengthen your flexbox skills!
A popular resource for Photoshop templates is dribbble. You can start by taking a look at the following list of template designs.
Website Psd Template designs, themes, templates and downloadable graphic elements on Dribbble
Discover 6 Website Psd Template designs on Dribbble. Your resource to discover and connect with designers worldwide.
Once you are able to build layouts resembling the above templates, you have already overcome your dread for CSS!