Starting Off With Flexbox

Image for post
Image for post
Pick your flavor!

When the web became dynamic to any screen-size, responsive layout design also became relevant. Responsive layout design helps the contents of the page to be displayed properly. Usually in CSS (Cascading Style Sheet), creating multi-column layouts can sometimes create weird behaviors that would not render the content properly. Sometimes the content would be perfectly rendered at this specific screen-size, but when the screen size changes, the whole content goes out of whack.

To create a solution for the complications, humans have invented Flexbox, CSS Grid, and Bootstrap. Today, we will be focusing on Flexbox! Let’s dive right in.

Flexbox: A one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

Image for post
Image for post
A header with three buttons spaced out.

“The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).”

Chris Coyier

Today, I will be showing the flex basics and how all the items can fit perfectly accordance to the screen sizes.

To start off, we will have to enable the main container and put the property display as flex. After that the items which are the child elements of the main container are easily distributed between each other.

There are also many things we can do to it as long as it is one-dimensional. We can make it go vertically, horizontally and so on with flex-direction. Flex-direction accepts 4 arguments; row, reverse-row, column, and reverse-column. I hope that you noticed that in order to use the flex-direction, the display must be flex.

Image for post
Image for post
Once we enable display: flex; on the main container.
Image for post
Image for post
display: flex; flex-direction: row-reverse; I am not going to show the column because it’ll take too much space on the blogs vertically. But you are welcome to try it out yourself by: display: flex; flex-direction: column or column-reverse;

Now the next thing we want to do is change the screen size and see if the items will stay the way they are or will they change.

Image for post
Image for post
Boo! Unfortunately it does not change to the screen-size yet, there are a few things we must use in order for the screen to render the items property.

To easily fix this problem, adding flex-wrap in the container div will allow the items to responsively fit themselves accordance to screen-size. Flex-wrap will allow the items to wrap as needed with this property.

Image for post
Image for post
The items are fitting the page perfectly as it should with the use of flex-wrap! Excuse the bad gif, I used giphy capture to get this part.

There we have it, a basic way of trying to get items to render perfectly accordance to the screen size! I hope this was able to help those that had no idea how to play with flex. If you would like to know more about flex and the endless possibilities you can achieve in a one-dimensional model I have two great recommendations. The first resource by sharkcoder.com gives a clear understanding on what properties you can use for the flex-container and the flex-items. The second resource is by Chris Coyier and he gives an in-depth explanation of flexbox and all the properties you can do to a one-dimensional model.

Happy coding!

Interested in the structure of codes and chasing the Dopamine rush as I start to understand their structures.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store