Flexbox finally convinced me. I don’t know why, after my first encounter with a CSS Flexbox, I had a negative feeling. I don’t know what it resulted from. Maybe I didn’t understand how flexbox can be used to build a great webpage layout, or maybe I didn’t understand how to use flexbox correctly. I got to know the new tool, but I didn’t want to use it. This has changed this week. Why?
It started with the Flexbox chapter in the Advanced CSS course
Initially, I wanted to skip this chapter, but then the thought came that it doesn’t matter if I like a tool or not, I need to know how to use it. It turned out that Jonas Schmedtmann can get to me very well. After five hours of video and I understood how it works and how you can use flexbox without struggling with the code.
Of course, there is still a flexbox froggy game available on the internet, but this is not enough to figure out how flexbox works. Even if your read all flexbox documentation, it’s easiest to understand how it works and how flexbox manages element position on webpage depending on the viewport when somebody shows you the mechanism working behind the scenes. Of course, it’s only my opinion.
At the beginning of the week, I coded a sample project from the CSS course, and in the second half of the week, I started my daughter’s website project.
Apart from the stage of website design, which turned out to be long and tedious (it’s good that people who want to deal with UI / UX live in the world), I mainly used flexbox to build the website layout.
Thanks to this, adding responsiveness took half an hour and that’s only because on the desktop I went crazy with the layout of photos in one section and I absolutely wanted to transfer this layout to mobile. Ultimately, I figured it would take too long, and below the screen size limit, it just loads one photo instead of several.
Taking advantage of the long experience with flexbox this week, I decided to post here a small summary of how to use this feature.
How to use CSS Flexbox properties?
We should start with understanding what elements flexbox “affects”. The display: flex property is set on the parent element, and the property will include all immediate children of that element. Flexbox will not affect elements contained in child components in the sense that it will arrange the layout of the children on the page, but not the elements inside the children.
Initially, it was the specificity that caused the greatest consternation. Mainly because at first, you don’t know how to arrange elements in internal components. In practice, you can easily set display: flex in the parent item, and then display: flex again in the child item if you want to use flexbox in it as well.
The second step is to understand what flex-direction is and how it works, in order not to be surprised how flexbox will position the elements on the page. Flex-direction should be understood as an arrow indicating the stacking direction of secondary elements. By default, the orientation of elements is left to right. It can be changed to the opposite direction with row-reverse.
Another possibility is to arrange items in columns. If we want the elements to be arranged one above the other, we use flex-direction: column. Finally, we have the option to arrange the items in the columns in the reverse order: column-reverse.
If for some reason it was necessary to arrange the elements in a different order than it results from their location in the HTML code, we can always use the order property. The default is zero. The higher the value, the closer to the start such element will be placed.
CSS Flexbox most common properties
Elements can be positioned along the individual axes:
- Justify-content – arranges elements along the flex-direction axis;
- Align-content – Arranges rows or columns along the axis opposite to flex-direction;
- Align-item – arranges elements along the axis opposite to the flex-direction;
- Align-self – arrangement of a single element along the axis opposite to the flex-direction.
The properties mentioned above are the real magic of flexbox. They allow you to quickly organize the content in almost any way in a given component or on the entire page. In addition, the flexbox has several settings that allow you to achieve the effect of responsiveness in a certain range of screen resolution.
Flex-wrap – allows us to decide whether elements in a given component should wrap. This property will always fill the known elements as many as those components will fit, and it will put the next ones on the next line if we set the flex-wrap: wrap property.
The next two properties that allow for the effect of responsiveness are flex-grow and flex-shrink. The first one determines if and with what priority a given element can grow within the available space, and the second property determines if and with what priority a given element can decrease.
These elements are complemented by the flex-basis property which determines what size the element should take in basically. You can set a flex-basis percentage, then the item will take up a certain percentage of the available space.
Is CSS Flexbox worth using?
As you can see css flexbox is a powerful tool that makes arranging elements on the page much easier. For me, the initial reluctance turned into a fascination and I sincerely recommend using the possibilities offered by flexbox, especially considering how much time can be saved thanks to this.
As I mentioned in the introduction, this week Flexbox was king for me. It took me six and a half hours to get used to Flexbox, another nine hours for my daughter’s website, of which three and a half hours were spent on the project.
Next week I will make more friends with Grid and I hope that thanks to these two tools it will be possible for me to build any page layout.
Here you can see how my adventure with Grid finished: Will I love Grid or no?