I started using flexbox, or just flex in CSS more and more and started to love it everytime that I use it. Flex is so simple to use and it works pretty much every single time. I have not had many problems getting flex work when it is accompanied with tons of other surrounding CSS. I have talked a little bit about flex before when I created a couple of examples in CodePen. Now, I want to write a fully dedicated article about my experience with flex.
In this article, I not only discuss how much I like flex, but how I used to use display inline block and floats to arrange elements next to each other. Before flex, this is how I used to position elements side-by-side. Now with flex, it is so much easier because of all of the properties that flex comes with.
What is Flex CSS?
Flex is a value that you can assign in CSS using the “display” property. The display property is commonly used in CSS to show and hide elements using the values “block” and “none”. You can also use the value “flex” and take advantage of flexboxes. Flex is great because it comes with so many properties that arranging and aligning your elements in flex is very easy and simple.
Here are some of the common flex properties that I have used:
I will explain what each one is and why they are so helpful in flex.
Flex CSS: Align Items
This property allows you to align your elements in a flex box horizontally. So you can align your elements from the top, center, bottom and more. This is the equivalent of using the property “vertical-align”. So this is just flex’s version of that same property. What I really like about using these flex properties is that web developer tools in Chrome show you a purple line when you go through the different values for each property. This really helps when seeing how your elements look when assigning a value to a property.
Flex CSS: Flex Wrap
Flex wrap tells your flex box whether you want to wrap your elements together in a row, or not. Usually, since you are using flex to place elements together in a line, then you most likely want to wrap them together. So you would assign the value “wrap” to “flex-wrap”. Otherwise, you set “wrap” to “nowrap”, which is like setting display to block.
Flex CSS: Gap
Gap is a really nice flex property because it works just like margin. What gap does is place space between your elements. Unlike margin, gap only places spacing between elements and not around them. With margin, you place spacing between elements and also outside them also. Unless you use margin top, bottom, left or right. So margin can add extra unnecessary spacing if you just use margin on its own.
The Problem with Margin: Double Spacing
With margin, you can add spacing on the ends of your elements which doubles the amount of spacing between your elements. Why? Let us say that you set the margin to 20 pixels. If you have two elements side-by-side, then the first element will have 20 pixels of margin on all four of its sides. That will be the same for the second element. So the first element has 20 pixels to the right and the second element will have 20 pixels to the left. So that double margin from the two elements total to 40 pixels even though you only assigned 20 pixels.
Using the gap property does not have this problem. A 20 pixel gap is a 20 pixel gap without having extra spacing when using flex. This is why I like gap more than margin because you do not have to account for unintended extra spacing. Gap just works without any other additional calculations needed.
Why is Flex CSS So Important?
Flex in CSS is important because it comes as a suite full of its own CSS properties. We are finally able to arrange our elements with a suite of properties that work together. The problem with using display inline block and floats is that they are not a suite of properties. They instead are standalone properties that may or may not work with other CSS properties. Often times, we are dealing with styles that are very intricate and become harder to overwrite depending on how much existing CSS in place.
Not only could there be a lot of CSS already loading on the page, but you can have several nested divs that can make CSS overriding tricky. Many reasons why some CSS properties will not work is just because there are conflicts with your new CSS trying to work with existing CSS.
However, with flex you have a suite of standardized properties that just work together because they come as a group. So this takes out the guesswork of knowing whether or not flex will work. From what I have seen. If you setup flex correctly, it should work every time. Notice I said “should” work, nothing is guaranteed in coding.
In Programming, Things Should Work But Do Not Always
I just mentioned that flex should work most of the time but is not always guaranteed. That is why when you ask programmers if something will work, they will usually respond with, “it should”. Why do we say that? It is mostly because we cannot guarantee that it will work 100%. We have a tendency to not overpromise and under-deliver. The reason why we do this is because each website is complicated and has a lot of things going inside it.
Just like the human body, we each have a different one. Each human body works similarly, but not exactly the same. If something is done to one person, the result might be different for another person. The same goes for websites. If you implement a solution on one website, it may work differently or not at all on another website.
My CodePen Flex Examples
I created a couple of examples using flex using CodePen:
- Creating a Sticky Top Bar With CSS Flex Design: An Example Using Code Pen
- How to Create Call-to-Action Buttons using Custom HTML In Gutenberg
Each of these examples use flex in CSS along with HTML and a bit of JS just to show you how they all work together. What I really like about flex is that you just assign it and its properties to the parent element and all children elements will be arranged and aligned based on how you set up your flex box.
I like this better than assigning the flex properties to the children because then you are only assigning flex once to a parent, rather than multiple times to the children. This just makes things cleaner and simpler without going through all of the children. Flex takes care of the children for you since they are nested under the parent element.
Now I would like to talk about display inline blocks and floats. I used to like using these properties to arrange elements side-by-side. Flex with its property suite just became easier and a more complete all-in-one solution. As I mentioned earlier in this article, I do not like piecing little parts together and then for some reason or another all of these pieces do not work. Flex is more reliable and has pretty good browser compatibility support for modern browsers.
Why Flex Replaced Display Inline Block
I used to use display inline blocks to place elements next to each other. One of the main differences with this and flex is that flex is assigned to a parent element. Display inline block is assigned to children elements.
Another difference is that you will need to use text align and vertical align to align your elements. I like flex’s justify content and align items more because they work specifically with flex boxes. Justify content is really nice because it has a lot of values including space evenly, around and between. Text align can not only align your element but also the element’s children. So you might have to go inside the element’s children and set text align for the children. So that is more CSS that you will have to write.
Align Item Stretch: Accommodating Different Amounts of Content
Let us discuss flex’s align items and compare it to vertical align. Something that I found interesting with align items that vertical align does not have is the stretch value which makes all elements on the same row the same height. This is to try to resolve the issue where you have elements like containers or buttons and you never know how much content each one will hold. So you try to estimate the largest amount of content that can be in a container and you set a height to all of the containers. You do this because you want all of the containers to be the same height and not look off or uneven.
Since dynamic content can always contain a lot or a little content for each iteration in a loop, align items stretch is a simple fast way to resolve that issue without having to assign a height. This is why Flex is so good because it resolves a lot of the issues with modern web development. In this case, we are trying to make containers of content look even with the same height without having to set a magic number for a height.
Why Is Display Inline Block No Longer Needed?
In many of today’s cases, display inline blocks are not really needed. If you are redesigning your pages, you should replace display inline block with flex. This is a good idea because then you are moving toward flex and removing instances of display inline block. You can probably design your pages faster with flex because once you get used to it, flex is very easy to use.
What About Floats?
Floats are what I used before display inline block and flex. So floats came first and were really simple. You have float left and right. Floating is weird because you have another property called clear. What clear does it mean that it stops and removes the float once you are done. If you do not clear the float, then the element will keep floating in the direction that you assigned the float for.
The whole thing with clearing floats is what makes floating unique and something that you do not have to do for either display inline block or flex. Floats are not as much now as we have better ways to arrange elements.
Do We Still Need Floats?
Floats have a very limited use now and tend to show up more in legacy CSS from older websites when floats were common. In this case, you still might have to deal with floats because there are old websites out there full of legacy code that was created a long time ago. This is why knowing how to do things the old way is just as important as doing things the new way. You just never know when you run into legacy code.
Floats Are Still Good for Wrapping Images Around Text
This might be the only time where I still see floats being used. When you read articles online, you often see text wrapped around images. This might be the only time that I see floats still being used. Other than this case, floats are rarely used. Now we have flex for what floats used to do.
CSS flex is great for creating layouts where elements wrap around each other and have replace display inline block and floating. Flex comes with a suite of its own properties that makes using flex simple and easy. The suite of flex properties makes flex reliable and you do not have to worry about piecing CSS properties together if you used the other aforementioned methods.
I discussed what I like about the flex suite properties, namely that they just work. When you have pages full of complicated CSS and elements nested under each other several levels deep, flex is just good to use because it is reliable.
Since flex is good, it has pretty much replaced display inline block and floating. Due to old websites having legacy code, you might need to know how to do things the old way. This is why it is good to be aware of how websites used to arrange and align elements in layouts.