FeedBack for a simple FlexBox Page

FeedBack for a simple FlexBox Page
0.0 0

#1

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.

Codepen

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!

Matt


#2

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


#3

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?

Matt


#4

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:

Matt


#5

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!


#6

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

Matt