Flexible Design
Making your CSS be flexible is as important as it is infuriating. Having your code grow to fill up the screen when too small, having it shrink when it is too big, having it change shape based on its contents, and having its contents change shape based on their container. These are all amazing examples of flexible design, and each offers a new and unique kind of torture. When I said earlier that "CSS does not make sense", at least 50% of that confusion comes from the difficulty of creating flexible design.
Unfortunately for anyone looking to make good CSS, we don't really have the choice to not make our code flexible. This struggle is inevitable, and it will serve you well to treat it with the respect it deserves.
So what is flexible design? Basically, it's making your code dynamically decide what shape to take based on a number of different values. One of the most common reasons you would make an element flexible is because you don't know what size screen your website will be viewed with. A program made with good flexible design will be just as legible on a phone screen as it is on a flatscreen.
The Woes of "flex"
So why is making flexible design such a nightmare? This is mainly because most of the properties that will allow flexible design do not seem to play well with other properties, and the properties they don't work with aren't always consistent. This can make using any flex property feel like a game of "what's gonna break this time?".
Besides breaking other properties, the main issue with flex properties is when you start having to nest flex elements within each other. Most flex properties will require a more concrete parent element to contain their changes, but what if the parent element also needs to be flexible in a different way? The result is programmer suffering.
My few tips
Here are a few tips I've learned that might help you in your quest to conquer flexible design, use them well.
1 - Use Soft Values
When writing CSS, you might be tempted to use hard values, like coding an element to be "400px" tall, or "250px" wide. These hard values are antithetical to the idea of flexible design, and you should try to avoid them as much as possible. Instead, try to use soft values like percentages as much as possible. If you tell your code that an element should be "50%" wide, then regardless of the size of the screen or browser, your element will always be half its width. You can also use percentages when declaring margins and padding, so be sure to use them to better shape your elements. The only issue with using percentages in this way is when you apply properties to an element that HAVE to have a pixel value, like the border property.
2 - Consult the Display Property
The display: property has a lot of different tools to help you shape your content as you need: tables, grids, lists, blocks, etc. These properties can be hard to use / implement, but when you can get them to work, they will do a lot of the work for you.
3 - Familiarize yourself with the Flex property
The flex: property is the tool designed around making content flexible. Used properly, it is the best tool for creating flexible design, but it can also be a headache to implement. As I understand it: flex-grow: will have your contents grow to fill its container, flex-shrink: will do the inverse, and flex-basis: will have your contents always be a certain percentage of your container's size. Unfortunately, these properties can be very persnickety about when and where they will work.
4 - Check out the Overflow property
The Overflow property can be very useful. At the most basic level, most HTML elements will automatically grow to be just slightly larger than their contents, but making an element flex will often cause this to stop working. When using flex containers, you will run into issues where your contents will expand outside their containers. There can be many ways to fix this, but one to consider is the overflow: property, which tells your code how to handle contents overflowing from their containers. If 'overflow:' doesn't do what you want, you can also try 'flex-wrap:' as it does a pretty similar thing.
Summary
Making good flexible design is one of the biggest headaches of CSS design, and it likely will be the cause of most of your troubleshooting. Trying to get a grip of the flex properties before you implement them anywhere will save you a lot of headache. Besides that, use soft values as much as possible. Having flex: elements inside of containers with set percentage sizes is the most basic way to make flexible design.
Top comments (0)