What is Flexbox?

CSS can be simultaneously amazing and intimidating. Having so many options for styling at your disposal can leave one overwhelmed with so many options to choose from. This truly means that your project can end up looking any way you want, as long as you know where to start. Flexbox is a great and well … flexible way to style your projects to change with an adjusting screen size, so no matter the screen size the user has, the content will be appropriately sized and displayed. This post will go over the basic ins-and-outs of flexbox.

Although reading this post will give you a good idea as to how flexbox works, the best way to see it for yourself is to fire up your code editor of choice and experiment with it yourself. That way you can see exactly how using flexbox affects everything!

Flexbox is built around the idea of a container and eveything in that container even when their size is unknown. This means that the size and spacing can be dynamic and flexible… so THAT’S how they came up with the name!

The container, or the parent element, is referred to as a ‘flex-container’ and each item in it is referred to as a ‘flex-item’. In order to define it in a CSS file, all you have to do is:

.container {
 display: flex;
}

This also enables a flex context for the container’s direct children.

Here are some other commands that help positioning with flexbox:

.container {
 flex-direction:
}

This will determine the direction of the flex items inside the flex container and will establish the main axis. The direction will place the flex items in columns or rows depending on the direction.

.container {
 flex-direction: row; //items placed left to right
}
.container {
 flex-direction: row-reverse; //items placed right to left
}
.container {
 flex-direction: column; //items placed top to bottom
}
.container {
 flex-direction: column-reverse; //items placed bottom to top
}

You can also use ‘flex-wrap’ to determine items fitting onto one line. By default, all items will try to fit onto one line. Using ‘flex-wrap’ will allow the items to wrap onto multiple line to adjust to the screen size.

.container {
 flex-wrap: nowrap; //all flex items will be on one line
}
.container {
 flex-wrap: wrap; //items will wrap onto multiple lines from top to            bottom
}
.container {
 flex-wrap: wrap-reverse; //items will wrap onto multiple lines from bottom to top
}

There are additional ways the items themselves can be styled. One great way for spacing is ‘flex-grow’, which allows a certain item to grow by taking up a portion of remaining empty space inside the container.

.item {
 flex-grow: 1
}
//if all items have flex-grow set to 1, the remaining space in the container will be divided equally between the items
.item {
 flex-grow: 2
}
//items will receive twice as much of the remaining space as items with a flex-grow of 1
//so on and so forth as flex-grow increases

Using flexbox on the container as well as the items within is a great way to help space items displayed to the user that already accounts for a changing screen size. It retains the programmers vision of how they wanted the page to look when being viewed and accounts for a variety of different screen sizes to ensure the content is properly spaced. I highly recommend giving it a try for yourself to see the results and get comfortable with flexbox, as it’s an extremely useful tool to have in you CSS arsenal.