How FLEXable can you be?

Short and quick intro to CSS Flexbox

Gif courtesy of Giphy

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?

Image courtesy of envatotuts+

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.

1. flex-direction: row; – main axis runs from left to right (this is the default)
2. flex-direction: row-reverse; – main axis runs from right to left
3. flex-direction: column; – main axis runs from top to bottom
4. flex-direction: column-reverse; – main axis runs from bottom to top

Contain what?

Image courtesy of css-tricks

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.

.class-name {
    display: flex;
}

Properties of FLEXing it

Gif courtesy of Giphy

There are three main properties to truly flex your flexing skills — flex-basis, flex-grow, and flex-shrink.

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 flex-grow.

How would you like to justify it?

Image courtesy of openclassrooms

The justify-content property is used to align items along the main axis. It accepts 5 different values.

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

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

Gif courtesy of Giphy

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.

flex-wrap: no-wrap;

Default. Want to overflow? This is the option for you.

flex-wrap: wrap;

Breaks the flex items into multiple lines, so you have the perfect flex package to give.

flex-wrap: wrap-reverse;

Maybe you want to spice things up. Same as wrap, but the flex items’ order is reversed.

Gif courtesy of Giphy

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.