Im here today to talk about one of my favorite and most utilized CSS web layout models, the CSS Flexible Box Layout, also known as the Flexbox. Flexbox makes it easier to design flexible responsive layout structure without having to use float or positioning.
For the most part anytime I need to display a collection of data in the form of “rows” or “columns” I use Flexbox. One of the greatest features about Flexbox is the responsiveness. It’s very easy to allow resizing and adjusting. You can turn a row into a column depending on the available screen size. Here are 6 common properties for Flexbox:
With all of this set up, my browser looks like the screenshot below when I run my application.
The first thing we want to do is enable Flexbox. This is possible by adding the following command to the ‘flexbox-container’ in the CSS.
Below is my updated CSS…
Our 1,2, and 3 are now in a row bunched together on the left side. You can see the image below.
We can some styling by adding “justify-content” and “align-items”. Justify-content will align the items in the container horizontally. This is kind of like “text-align”. Align-items will align the items in the container vertically. It will be hard to see the results of align-items unless we add a height to the Flexbox container. Below is a screenshot of my updated CSS.
Now my browser looks the screenshot below.
We can spread these items out a little bit for styling by adding some padding and margin to each div item in the Flexbox container. I will also add a border to each item to add the box or card look. Below are screenshots of my updates…
We can turn the row into a column by adding one line to the Flexbox container CSS. This is great for conditional rendering in the CSS. I use this all the time for resizing and responsiveness. You can check out the screenshots below.
We could also reverse the order if necessary in the form of a column or row. I’ll show some screenshots of this below…
There are 3 options that we can use for resizing and responsiveness.
— set the width to a percentage of the screen size
— flex-wrap to wrap the items to the next line if items can’t fit current window
— flex-flow is a combination of flex-direction and flex-wrap..the default is “row nowrap”
Since we have 3 items I will set the Flexbox container width to “100%”, and each item to “33%”(Because we have 3 items) . Below is a screenshot of my CSS
Below I will display two screenshots with the browser to show the responsiveness. The first one will be a fullscreen and the other one will be half the size of my screen.
Its a little difficult to see the difference here, but I promise it’s different! Sometimes we might not want the items in the Flexbox container to resize, but we still want them to remain within the screen boundaries. This is when flex-wrap comes into play. Flex-wrap will wrap our items to the next line if enough space isn’t provided. Below is a screenshot of my CSS and and my browser at full screen and 750px(Mobile Screen size).
And lastly I’ll show how we can combine flex-direction and flex-wrap together using flex-flow. Below is a screenshot of my CSS and two screenshots of browser like before. One will be a full screen and the other will be a mobile screen.
You can see not only do our items wrap, but they are in reverse order! There are a couple more options available here such as flex-grow, flex-shrink, and more. Flexbox is awesome, and I hope this article encourages you to use it! As I previously mentioned I use Flexbox all the time.