Flex Box

What is flex box?

Flex box is type of layout that you can use for your HTML elements. Since flex box makes your elements flexible, it allows you to easily realign and evenly space them out. With that in mind, it’s a good feature to use when it comes to making a responsive design.

When to not use flex box

Some drawbacks of using flex box is that it’s not supported by all browser versions. If you were to load a page that uses flex box on an unsupported browser, then you’ll experience some loading issues with the website. Also, I’ve read that using flex box to layout you’re whole website isn’t recommended because it’ll take longer for the website to load since this feature depends on content size. If your page had a lot of content, then it would experience some issues while loading.

Examples:

div{
justify-content: space-around;
}

This code makes your inline elements evenly spaced on that line. So basically, it gives all the elements the same margin while making sure that they take up a whole line.


div{
align-items: stretch;
}

This simply changes a div’s height to stretch from the top of the page all the way to the bottom of the page.


div{
align-content: flex-start
}

This property is similar to the justify-content. The only different is instead of working with inline elements, it works with block elements. Using the flex-start will allow it to start stacking on each other from the top of the page.

Tutorials I used

The first thing I saw when I searched up flex box was a page called ‘A Complete Guide to Flexbox | CSS-Tricks’. This page showed the basics of flex box by giving me examples of code along with complimentary pictures that helped me visualize how it works. Another website that I used was ‘When to use Flexbox : The Brolik Blog’. This website gave me an understanding of the positive and negatives of flex box. Not to mention, it gave advice on when to use it and what the dos and don’ts are. I also used w3schools to help me try examples of flex box. Since they provided code for me to use, I played around with it and got myself to become familiar with how the flex box properties work.