Flexing Your Muscles 💪 With CSS Flexbox

Disclaimer:

Really, who starts an article with a disclaimer? Well, me. I can't even write enough CSS to save my life. This is my second week at lambda school and it has been all shades of awesome. Prior to now, I had this fear for CSS, because it was too hard 😭, thanks to lambda school that fear is now somewhat of an inspiration 💪😊.

To get started, please bear in mind that we would be turning most of your CSS fears to motivational factors, things to push you to want to get better at CSS 💪.

.johnson-div {
    display: flex;
 } 

Oh, yeah. The code above is all you need to get started with flex, but not all you need to get your site to fully utilize the strength and might of flex, to better get a grasp of concepts discussed, we would be making use of images of some ugly boxes. Take a good look at the image below before jumping to the Flex Properties section

Flex Properties:

- Display: This defines a flex container, we have seen this used in our previous code snippet.

.johnson-div {
    display: flex;
} 

- Flex-direction: This property is used to specify the direction we want our container-items to flow and what their orientation should look like. The flex-direction could have the values of column, column-reverse, row-reverse, row which is the default flex-direction. The images below describe how each work.

.johnson-div {
    display: flex;
    flex-direction: row || row-reverse || column || column-reverse;
}

- Justify-content: This property helps us distribute the spaces along the main axis among the container items, now the question comes, what is the main axis. To answer those, for a container in flex, we have the main-axis and the cross-axis.

• For flex-direction: row, our main-axis runs from left to right, while on the flex-direction: column, our main-axis runs from top to bottom.
• For flex-direction: row, our cross-axis runs from top to bottom, while on the flex-direction: column, our cross-axis runs from left to right.

The image below goes a long way to further describe these concepts:

After explaining what the main axis and cross axis are, let's get back to discussing justify-content.
justify-content takes as values, either space between, space evenly, space around, flex end, flex start, center. Below are images illustrating the effect of this property on our container items.

.johnson-div {
     display: flex;
     flex-direction: row || row-reverse || column || column-reverse;
     justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
}    

Below are verbal explanations of the values illustrated using the diagrams:

• flex-start(default): container items are placed toward the start line.
• flex-end: container items are placed toward the end line.
• center: container items are centered along the line.
• space-between: container items are distributed, such that the first item is on the start line, the last item on the end line. Here the spaces aren't equal.
• space-evenly: container items are distributed so that the spacing between any two container items is equal.

- Align-items: This property just like the justify-content, helps us distribute space but this time along the cross axis. It also has its own values like the justify-content, some of which are;

.johnson-div {
     display: flex;
     flex-direction: row || row-reverse || column || column-reverse;
     justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
     align-items: flex-start || flex-end || center || baseline || stretch;
}    

• flex-start: Does the same thing, but this time on the cross axis.
• flex-end: Does the same thing, but this time on the cross axis.
• center: Does the same thing, but this time on the cross axis.
• baseline: container items are aligned such that their baselines align.
• stretch(default): stretch to fill the container.

.

With the justify-content and align-items, it's easy to center a container or div comfortably on the webpage just by making the values of both centered.

- Flex-wrap: By default flex items would all want to stay on one line, which results in the items being shrunk so they can fit into the screen, which at times really appears to be ugly.
But to solve this and force our items to flow into other lines when it gets to the end of the line, we use another flex property flex-wrap.
flex-wrap, has the values: no-wrap, wrap, wrap-reverse. Below is an image illustrating how each is used.

.johnson-div {
     display: flex;
     flex-direction: row || row-reverse || column || column-reverse;
     justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
     align-items: flex-start || flex-end || center || baseline || stretch;
     flex-wrap: wrap || nowrap || wrap-reverse;
}     

Note: There is a shortcut for combining both flex-direction and flex-wrap, called flex-flow. Notice the change in our code when we use it.

.johnson-div {
     display: flex;
     justify-content: space-between || space-around || center || space-evenly ||flex-start || flex-end;
     align-items: flex-start || flex-end || center || baseline || stretch;
     flex-flow: row wrap || column nowrap || row wrap-reverse || etc;
} 

Lastly, there are other properties of flex, you can apply directly to flex items, I would allow you research on those. But if you can't I found this article from CSS tricks useful.

I hope you find my article useful too 😊, share and leave comments on improvements I can make to the article. Thanks