An Introduction to Flexbox
If you’ve been around the developer world for the last year or so, you’ve probably run across the term ‘flexbox’, a new layout technique. If you’ve been a developer for any period of time, you probably know how difficult it is to actually get a page to look the way you want it to look, especially with the rise of responsive design. In this introduction, we will talk about the power of flexbox, and how you can get up and running quickly with it.
As the name suggests, flexbox offers a flexible way of designing your web page. With this new technique, there is no need to use tables, floats, clearfix or any other ‘hacks’, and it is easy to get started with. Flexbox is based on understanding a few concepts.
- The main axis and the cross axis
- Flex containers (parent) and flex items (children)
- Flexbox inception.
The Main axis and the Cross axis
If talking about axes scare you (and brings back bad memories of high school geometry) don’t worry. There is no math here, just love. The only thing you need to take into consideration with flexbox axes is that the main axis refers to horizontal positioning and the cross axis refers to vertical positioning. The properties you use will depend on where you want to position an element on the page.
Containers and Children
The power of flexbox lies in its containers and children elements. Turning an element into a flex container is as easy as adding the property/value pair of display:flex; to it. This gives us great power over the page’s layout as this is how we control the flex-items. A flex container allows us to control the direction of child elements through the flex-direction property. The justify-content property allows us to distribute the child items among the main axis using the flex-start, flex-end and center values, among others. The justify-content property is one of the most valuable properties in flexbox world since it helps to center items. Another important property is align-items, which helps us position elements on the cross axis. Using the justify-content and align-items properties together helps developers achieve perfect centering, which is also known as the holy grail of CSS.
In order to have even more control over the elements, the child elements (flex items) can also be assigned their own property/value pairs. Some of the properties for flex items are:
order:this changes the order of the item in the flex container.
flex-grow: this property allows the item to grow if necessary.
flex-shrink: allows the flex-item to shrink if necessary.
align-self:acts the same as align-items, except it offers more specificity to individual items instead of the the entire group.
Flexbox inception is a term I use in reference to turning a flex item into a flex container. By doing this, you can control items inside the flex item itself.
There are many more flexbox properties not mentioned in this article. Luckily, there are lots of other resources out there that will help you learn about flexbox, like this fun game. Have fun flexing!