Centering seems to have failed in the online demo

StefanKovac / flex-layout-attribute

HTML layout helper based on CSS flexbox specification —

http://progressivered.com/fla/

MIT License

712 stars 57 forks source link

Centering seems to have failed in the online demo #18

Open xparq opened 5 years ago

xparq commented 5 years ago

I was just playing around in the nice, and slightly addictive demo, until this state, where item 2, which claims to be centered, isn't. (I thought it may be vertical centering only, but item 1 has its horizontal position similarly displayed, and the parameter list also says "center" for the horizontal position.)

If it's indeed a problem, I think it happened right after setting "left" to item 1.

Anyway, HTH. Very nice work, nonetheless!

StefanKovac commented 5 years ago

Thanks @lunakid!

You are right. To align item in the same direction as the main axis, margin hack is incorporated - flexbox provides a way to individually align item only on cross axis.

In the above case, when setting the item align to left, margin-right: auto; is applied to the item what makes other items push to the opposite direction.