This content originally appeared on DEV Community and was authored by masuggs515
I know we've all been there. Creating a simple section of a webpage and wanting to line up three columns in perfect harmony. It should be extremely simple as we all know how to use flexbox. So we have our simple HTML.
Nice, now all we need is to set up display as flex in our CSS right?
We refresh the page and expect everything to be perfect and...
WHAT IS THIS?
So it seems like a slight over reaction, but using flexbox can have some very odd behaviors, one of which is the sizing of all columns when they have a different amount of content within. Why does it do this?
Flexbox uses two settings that control the actual width of the columns. One is flex-shrink. We can alter this, but good luck getting everything lined up evenly. And then once you do, please don't attempt editing or adding/removing anything in any of the columns. The second setting is how flexbox decides things behind the scenes. Flexbox actually looks at the amount of content within a given column and compares it to the other columns.
As an example:
If the three columns have 20px, 30px, and 50px respectively, the width of each column will be 20%, 30%, and 50%.
The most common fix in the beginning is to create a class for each column(like I have above), and set the width to 33.33%. I have seen this done on more than one occasion and honestly it works! Until we add or remove a column. The example below is what happens when we remove a column.
Each column stays at 33% of the parent div, but with only 2 columns this will only span across 66% of the section.
The next option is also acceptable and much better than using divided percentages and that is to set each column's width to 100%. Since flexbox still uses it's flex-shrink, It will shrink all columns to an equal width. And...
It works! Yes this works exactly how we want, but it can be better and cleaner. If we add a new column and don't add the column class everything goes right back to square one. The below example I added a card to make it obvious that this was just new material.
So we have two options, the first is to add the class of column to each and everything that we add in to the columns div, but the easiest and cleanest option is to pass the style in to anything that is added as a child in to the .columns section with the * selector.
This will make any element added, that is an immediate child of the .columns div, have a width of 100% without having to add a class in each child. This simple change to the CSS will clean up all code and make it simpler when adding any columns. Also, you could use these classes and styles in multiple places with no concern of uneven column widths. The final output without adding the class of column to the card, and with the only extra styling being to add a small gap, looks something like ...
Ahh... Much better! This not only is helpful for styling easy evenly spaced columns, but I also think it's more important to know what was happening behind the scenes to know why these methods work. Flexbox can be very useful when we understand a few of the things it's doing behind the scenes.
This content originally appeared on DEV Community and was authored by masuggs515
masuggs515 | Sciencx (2021-04-19T23:16:31+00:00) Does flexbox do exactly what you don’t want?. Retrieved from https://www.scien.cx/2021/04/19/does-flexbox-do-exactly-what-you-dont-want/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.