The Startup
Published in

The Startup

Styling an App With CCS Flexbox

The coding bootcamp I attended taught us full-stack programming, both front-end and back-end. Something I didn’t expect was that, when it comes to creating the front-end of an application, you can’t just focus on the JavaScript code for the behavior of the app; you need to use CSS to style the app so it will look interesting and appealing to a user. As someone new to styling an application, I decided I wanted to try to write my own CSS instead of using a framework like bootstrap. The thing that I found was the most helpful was the CSS 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:

<div class="nav-bar">
<<p><a href="/about">About</a></p>
<p><a href="/">Home</a></p>
<p><a href="/signin">Sign In</a></p>
</div>

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:

.nav-bar {
display: flex;
}

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 justify-content; 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.

Using space-between

Both space-between and 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,

Using space-around

while 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.

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

ClearObject Managed Services Supports Engineering Tools

Be Careful With Lombok

From Python to Rust: Part 2

I’m so excited to introduce you guys to Test Tst a biz owner from Big Bear City, CA!

5 Minute DevOps: Standardizing to Scale

Data Skew in Apache Spark

Remote Synchronization for WSO2 EI Cluster

Building Infrastructure with CloudFormation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Valerie Foster

Valerie Foster

Software Engineer

More from Medium

Front-End: Enhancing Styling With CSS

Enjoying web design using Tailwindcss

How to reduce a background-image sharpness and opacity.

Master The CSS Grid