Building a Music App Layout with Flexbox

After walking through the boring rigorous stuffs, you deserve some fun project.

It’s time to walk through a practical example and apply your newly acquired Flexbox skills

It took me days to come up with a good project. Out of the lack of a creative option, I came up with a music app layout for cats. I call it catty music. Maybe by 2036, we’d have cats singing in rock bands somewhere in mars :-)

Here’s what the finished layout looks like, and it is completely laid out with Flexbox.

You may view it online here

If you view that on a mobile device, you’ll have a slightly different look. That’s something you’ll work on in the responsive design section of this article.

I’ve got a confession to make though.

I’ve done something considered wrong by many.

I’ve completely built the overall layout with Flexbox.

For many reasons, this may not be ideal. But it’s intentional in this scenario. I set out to show you all the things you can do with Flexbox, all wrapped up within a single project.

If you’re curious as to when it’s considered right or wrong to use the Flexbox model, you may check out my article on that. Flexbox is awesome but it’s NOT welcome here

There, I got that off my chest. Now I’m sure no one’s going to yell at me after taking this course.

Everything in Catty Music is laid out using the Flexbox model — this is intentional to show off what’s possible.

So let’s get this thing built!

As with any reasonable project, a bit of planning goes a long way sifting through inefficiencies.

Let me take you through a planned approach to building the catty music layout.

So where do you start?

Whenever building a layout with flexbox, you should start by looking out for what sections of your layout may stand out as flex-containers. You may then leverage the powerful alignment properties flexbox makes available.

The Breakdown

Take a look at the finished layout again.

You may have the overall containing body as a flex container (represented by the red border in the image below) and have the other sections of the layout split into flex-items (item 1 and 2).

This makes total sense, as item 1 contains every part of the layout other than the “footer” — the section that contains the music control buttons.

Did you know that a flex-item could also be made a flex-container?

Yep, it’s possible!

You can nest as deep as you want (though the sane thing to do is to keep this to a reasonable level).

So, with that new revelation comes this…

Item 1 (the first flex-item) may also be made a flex container.

The sidebar(item 1b) and main section(item 1a) would then be flex-items.

You’re still with me, right?

Decomposing your layout like this gives you a really good mental model to work with.

When you begin building even more complex layouts with the Flexbox model, you’d see how vital this is.

You do not need a fancy image like the ones above. A simple rough paper sketch should be just fine to get you going.

You remember I said you could nest as deep as you wanted? It appears you may do one more nesting here.

Take a look at the main section above (Item 1a).

It could also be made a flex container to house the sections highlighted below. “Item 1a — A” and “Item 1a — B”

You may decide not to make the main section (item 1a) a flex container and just put within it two “divs” to house the highlighted sections.

Yes that’s possible, since “Item 1a — A” and “Item 1a — B” are stacked vertically.

By default, “divs” stack vertically. It’s how the box model works.

If you choose to make the main section a flex-container, you get the powerful alignment properties at your disposal. Just in case you need them at any time.

The “flex” in Flexbox means flexible.

Flex-containers are by default flexible, kind off responsive.

This may be another reason to use a flex-container over regular “divs”. This depends on the case scenario though.

I’ll touch up on some other things as you build catty music. You should get to writing some code now.

We’ll start off with the basic html set up below: