Responsive Web Design: CSS Flexbox
A quick introduction to the art of flexing
When I hear the term “flexing“, I instantly start to picture gyms, sore arms and buff, sweaty dudes who drink more protein shakes than they do water. But fortunately, the only flexing we’re going to be discussing today is the one done on our computer screens, no weights required. Just a quick explanation for those who are new to the idea, responsive web design is a design concept that involves formatting webpages in a way where they are rendered well regardless of the screen size being used. In this article, we’ll take a brief look into one of the many ways of applying RWD tactics to a website…by using Flexbox.
What is Flexbox and Why Should I Consider Using It?
CSS Flexible Box Layout, also commonly referred to as just Flexbox, is a type of one-dimensional layout pattern for CSS that arrange elements on a webpage in a way that allow those elements to automatically reposition themselves and adjust their height-width ratio to fit varying screen sizes, hence, the term ‘flex’. Essentially, this is done by creating a flex container that allows for elements inside the container to fill additional space or shrink in size to avoid overflow where needed. The benefit of using flexbox as mentioned above is the fact that your static webpages will look aesthetically pleasing no matter what viewport ratio a person is using to access your website.
How to use Flexbox
- Create A Container Div with Child Elements
When using flex, you must have a parent or flex container(most often a div)that holds all of the child elements you wish to arrange dynamically. When creating your parent and child elements, make sure to give them identifiers like id or class selectors.
2) Setup Flexbox in Your CSS File or Style Tag
To begin using flex, you want to add the css property ‘display: flex;’ to your parent container.
3) Apply Flex Properties to Parent and Child Elements
Flex does not consist of only one css property. Once you add ‘display: flex;’ to your parent container, you now have access to a number of other flex properties you can use to manipulate the layout of your application. Some of these properties are set on the parent container(a.k.a. ‘flex container’), whereas other properties are set on the children(a.k.a. ‘flex items’). The most commonly used properties are flex-direction, justify-content, align-items, align-content, and align-self . These properties only affect the positioning of elements, whereas, flex-grow, flex-shrink, and flex-basis changes the sizing. For a comprehensive overview on all the various flex properties I recommend you check out this really helpful article that covers how to use each flex property.
Conclusion
And there you have it, beyond learning what each flex property and their values, you are now ready to start applying flexbox to your web apps. I hope you enjoyed reading my article and are on your way to mastering the true art of flexing.
