Learn about the importance of themes and how they can be expanded to better meet your needs!
The Power of Flex
Ok so not this kind of flex. Rather display: flex.
Flex is a powerful display setting in css. Flex, as you might imagine, is very flexible and allows a developer to easily line up items in different ways on a web page. One very common thing across many different web site is two column layouts, with something like an image on the left and text on the right. This looks great on desktop views, however on smaller screen sizes the text becomes too cramped, the image is displayed too small, and the user experience goes to trash.
Having the two column layout set to flex will allow for easy breakpoints though. A css rule can be written that caused the flex-direction property to change when a certain screen size is reached. Use the demo below to see how easily flex can rearrange how elements are displayed.
Flex is good for a lot more than just stacking containers though. In the same situation, with a two column layout, flex can easily swap what side the containers are on. Abilities such as this allow for much easier content creation!
Flex is able to easily center items, evenly space items, adjust vertical alignment, and so much more!
A good understanding of display: flex is essential for a good web developer. So many of the hurdles of creating aesthetic web pages, such as proper gaps and spacing, can be easily be set using flex properties. There are multiple different display properties available to developers when building a website, and due to the power of flex, it has gained a position as one of my favorites.
