Styling an App With CCS Flexbox
Something I noticed when I looked at my web pages before I added styling was that every HTML element will just be listed vertically down the left side of the page. Flexbox takes care of that; it will automatically list elements horizontally across the page, and it gives you the ability to decide how you want them to be spaced out. But the greatest benefit of using flexbox is that it allows you to style elements without knowing ahead of time what the size of those elements will be.
Now, to use flexbox you just need to add
display: flex; to the style of whatever
div contains all the elements you want style. For example, most applications have a navigation bar at the top of every page. So lets say I have the nav-bar written like this in my HTML:
<p><a href="/signin">Sign In</a></p>
If the only styling I have is for the colors of the links and the background, it will look like the picture below:
But this styling isn’t really enough to make it look the way you would expect a nav-bar to look. Most of the time you would want to have the links listed across the top of the page. The way to do that is to make the nav-bar
div a flexbox in your CSS like so:
Just by adding this one line to your CSS, you can see an obvious change on the page:
But this still isn’t quite usable because the
p elements are too close together and they still start right at the left side of the page. That’s why flexbox gives you a way to declare how yo want items to be aligned and spaced out horizontally, using the
justify-content property. There are five options for
flex-start: this is the default and makes everything start on the left side of the container;
flex-end: items align to the right side of the container;
center: items are all at the center;
space-between: everything has equal space between them; and
space-around: the items have equal space around them.
space-around sound very similar, but the main difference is that
space-between will leave the elements close to the edges of the page, like the first image to the left,
space-around will leave as much space around the edges as there is between the elements, like the second image.
From the final example above, we can already see that the nav-bar looks much better using flexbox than it did without. But there are a lot more things flex-box can do for you.
For example, if you have a long list of things that may not all fit across the top of the page, they could get all bunched together, which would look bad, as shown in the image.
The solution to this is the
flex-wrap property. This property has three options;
nowrap: the default where every item is fit on a single line;
wrap: if there are too many items to fit a line, they will wrap around to additional lines, shown in the image to the left: and
wrap-reverse: which works the same as
wrap, except the items are wrapped to a line above instead of a line below.
As a companion to the
justify-content property, that determines how items are spaces horizontally, flexbox also has
align-items, which determines how items are spaced vertically. The options are;
flex-start: the default where items align to the top of the container;
flex-end: items align to the bottom of the container;
center: items align at the center vertically;
baseline: items display at the baseline of the container; and
stretch: items are stretched to fit the container. Using the nav-bar example, you might want to use the
align-items property if you have a large logo as part of the nav-bar, you might want the links to be closer to the bottom or center of the nav-bar instead of the top.
And this is it for my overview on CSS flexbox. Even with everything I have talked about, I have only scratched the surface of how flexboxes can be used to style parts of an application. Whenever I am creating a new app I make sure to use flexboxes to make the layout of the pages more appealing to the eye. Even without much knowledge of other things that CSS can do for me, I have been able to style complete applications using flexboxes, and I’ve come to rely on them to achieve the layout I want for any new application I make.