whiteTea whiteTea - 23 days ago 7
CSS Question

Flex box 'Align-self' not aligning properly on carrousel

I'm making a flexbox image carousel and I want to place the right and left buttons inside the carousel flexbox, so I positioned them as absolute. I set the wrapper to

flex-flow: row
so my gut says that whenn setting the buttons to
align-self: flex-end
and flex-start respectively the should go at the begining and the end of the flexbox row.

I made a quick codepen to ilustrate the matter: https://codepen.io/Xgr/pen/RLoWoj

Any suggestions on what am I doing wrong?

Answer Source

2 things is going wrong here:

  1. align-self on flex row items is set for its cross axis (vertical).

  2. Due to a change in the specs. there is an inconsistent behavior cross browsers for absolute positioned elements.

To horizontally left/right align flex row items when set on the flex item, use margin-left: auto/margin-right: auto, though since this won't work on i.e IE/Safari, a workaround for them is to use left: 0/right: 0

Updated codepen