Flexbox in CSS
Let’s face it, time and again when we start a new web project, we always prefer starting with a lightweight framework to get a headstart and make our work easier. Sure there is a little compromise on having an extra bit of unnecessary code but we are fine with it as we don’t have to go through the painstaking process of making a layout using blocks, inline, tables, etc. Well, guess what! CSS has added a new layout mode which would minimize, if not entirely eradicate, the use of frameworks for many projects. This layout mode is called Flexbox, short for Flexible boxes. This tutorial will give you a short guide to understand the basics of flexbox and how you can add them to your project and reduce the hassle and headache of positioning different elements in the layout.
In this article, we will be covering-
1. Flexbox Terminologies and basics.
2. Properties of flex containers.
3. Properties of flex items.
Most of the terms are self-explanatory while others are best described through examples. I’ll try to define the complicated ones. Also, I would like to add that I have used examples/images from sources like w3schools, css-tricks etc. as they have made images which are clear and easy to understand and would help beginners grasp concepts easily. Let’s get on with it, shall we?
Container and Items
Flexbox contains containers which have items inside it. By defining the container’s
flex, we can start using the flexbox model inside it. Let’s take an example to understand how it looks, visually.
As we can see, the in the image above, the blue area is the container having eight elements inside it called items. Time to have a look at a sample code now-
<div> a </div>
<div> b </div>
<div> c </div>
Now define the class
flex-container like so-
As you can see above, since we have defined the property of
flex-container, the child
divs inside it becomes the items of the container.
Properties of Containers-
It defines whether the elements inside the flex layout should be a block or inline.
display: flex /* or inline-flex */
Yes, we can also control the directions by which our elements can be arranged and in which order. Possible values are
flex-direction: row | row-reverse
This is an interesting property which would solve many problems related to responsiveness. the values are
wrap-reverse(reversing the order of elements once wrapped). So basically it means that if it is wrapped, then the items, which are outside of the browser’s view will come directly below it. Cool right?
It is a shorthand for
flex-wrap properties. Example usage-
flex-flow: row wrap;
Okay for this I would like to show you visually how it would look for different values of containers having three child elements.
Wait, will the above solve the centering problem? Yes! if you want an element to center horizontally, just a
center value will do the job if you have defined it as a
Suppose you have a container covering the whole of browser’s height while the elements are of different sizes. now you have learned how to evenly space them out horizontally. Now you would want them to evenly space out vertically.
align-items is your savior! Again, I chose to show a visual of the workings of its different values.
Let us extend the above example for more elements with the
flex-wrap property set to
wrap. The elements may be of three to four rows but not necessarily cover the whole browser. In this case, we have different options for positioning them with flexbox’s
align-content property. Let’s have a look at the image below-
Properties of Items-
It determines the order in which the flex-items are laid out. By default, it follows the source order (i.e. the value is
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
The above code places the elements in the following order-
flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
If all items have
flex-grow set to 1, the remaining space in the container will be distributed equally to all flex-items. If one of the item has a value of
2, the remaining space would take up twice as much space as the others (or it will try to, at least).
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 2">2</div>
<div style="flex-grow: 1">1</div>
As we can see below, the middle element twice as much space as the first and the third element.
This property defines how much a flex-items will shrink relative to the rest of the flex-items. The default value is
1. A value of
0 means that it will retain its original size relative to other flex items.
In the below code let us assume that every div in the container has a
100px and a
10px all in one line. Obviously, for a small browser width, it would shrink to fit. Let us apply a
0 to the third element so that it retains its original size.
<div style="flex-shrink: 0">3</div>
We can see that the third element has retained its original size relative to other flex items.
This defines the default size of an element before the remaining space is distributed. It can take values in pixels, percentage etc. The default value is
auto, which takes the size according to the
height properties. In the example code below, we set the default size of the third element to be
<div style="flex-basis: 200px">3</div>
This is the shorthand for
flex-basis combined. The second and third parameters (
flex-basis) are optional. Default is
0 1 auto. Example usage-
<div style="flex: 0 0 200px">3</div>
align-self property specifies the alignment for the selected item inside the flexible container. The
align-self property overrides the default alignment set by the container's
align-items property. Its possible values are same as those of the
align-items property. The code below shows how we can override the
flex-start property of the third element by applying a
flex-end on it.
There you go! All the ingredients for a perfect flexbox recipe laid out for your taking. Time to say bye to bootstrap and say hello to the flexbox layout!