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.
“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).”
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.
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.
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.
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!
