DEV Community

Deepak Devanand
Deepak Devanand

Posted on

Flexbox - Override 'justify-content' on Child Items

There are times when we want to place a specific child item out of flexbox context, so we have granular control on its placement relative to its parent. justify-self doesn't seem to work, contrast to its sibling align-self.

The flexbox layout specification talks about absolutely-positioned children:

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

Taking this into account, we can let flex items of choice opt-out flexbox layout, and be positioned using position:absolute property.

Discussion (0)