Short and quick intro to CSS Flexbox
Ever want to create a navigation bar on your website that is responsive to your users’s display and interactions?
The Flexible Box Module (or
flexbox for short) is a one-dimensional layout model that allows items in a specific container to “flex” or distribute space.
Being one-dimensional allows the layout to be modified one dimension at a time. This could either be a row or a column. If you’re looking to control both rows and columns together, check out CSS grid layouts.
Which way do you want to flex?
There are two axises when working with a flexbox there are two axes, main and cross.
You can define the main axis by using one of the four possible Flex-direction values — row, row-reverse, column, and column-reverse.
flex-direction: row;– main axis runs from left to right (this is the default)
flex-direction: row-reverse;– main axis runs from right to left
flex-direction: column;– main axis runs from top to bottom
flex-direction: column-reverse;– main axis runs from bottom to top
The area you want to “flex” is called the flex container. To initiate the container, simply change the display’s property to flex or inline-flex.
The difference between flex and inline-flex is
inline-flex does not make flex items display inline. It makes the flex container display inline.
Properties of FLEXing it
There are three main properties to truly flex your flexing skills —
Flex-basis — defines the size of the item’s available space. This number can be set to however many pixels.
Flex-grow — if the property is set to a positive integer, the flex items will stretch along the main axis and take up any available space.
Flex-shrink — determine how much space should be taken away from the item or the opposite of
How would you like to justify it?
justify-content property is used to align items along the main axis. It accepts 5 different values.
flex-start — (default) items are targeted toward the start line
flex-end — items are targeted toward the end of the line
center — items are centered along the line
space-around — items are distributed along the line; first item is at the start and last item is at the end
space-between — items are distributed evenly
space-evenly — items are distributed so that the spacing between any two adjacent alignment subjects are the same
Let’s Wrap It Up
Being the only one out of line is no fun. That’s where flex-wrap comes into play. It allows flex items to be broken down into multiple lines instead of overextending outside of the container.
Default. Want to overflow? This is the option for you.
Breaks the flex items into multiple lines, so you have the perfect flex package to give.
Maybe you want to spice things up. Same as wrap, but the flex items’ order is reversed.
If you still can’t wrap your head around it, here is a link to a beautiful demo from Mozilla.
Flexbox is your (froggy) friend.
There are so many things you can do with flexboxes. If you still need to brush up on some of your basics, check out Flexbox Froggy is there to save the day.