FeedBack for a simple FlexBox Page

Hi Everyone,

I am just starting to learn Flexbox and I have created a very simple page with a straight-forward layout. I am quite pleased with it but for one detail: The last line of notes are not aligned the way I want.


I would like them to be aligned on the left side and not in the center, any idea on how to do that?

Thank very much!


Hey Matt

As someone who’s playing around with Flexbox himself, let me take a stab at this.
I think it might be a bit easier to wrap your article divs into different row divs. That way, your last row take have a justify-content: flex-start.

I’m sure there are better ways, but that’s an easy fix right there?

You should definitely think about playing around with flex-grow or flex-shrink with a :hover effect! It’s a fun little animation effect

Hi there,
thanks a lot for your reply.
What you are suggesting makes perfect sense and I have to admit that I thought about doing it but I decided not to for a reason: I’d like to eventually add a button to the page that allows me to dynamically add notes to the page.

I’ll look into flex-grow and flex-shrink straight-away, they looked a bit confusing in the tutorials; what about the :hover effect with them?


By reading your reply I had an epiphany!
I combined flex-start (instead of space-around) with a margin of 8px and it works like a charm!
Cheers Mate! :sunglasses:


Woo! An even simpler solution! As easy as adding a flex-start to all elements, huh?

I added a flex-grow to your article elements with a hover effect. You can see the fancy effect with the bottom two articles, the rest don’t seem to want to work properly. Check it out, just a little way to practice the flex properties for children!

That’s very cool!
I’ll bear it in mind and actually I think I am going to add some animation on the text of the Navbar and I’ll do your animation on the whole note.

Check out the new development, I am on fire today! :smiley:
Mind I haven’t added the JS yet :slight_smile:
Forked Page, almost an app now