Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CSS Pattern: Horizontal Flush Panel

CSS Pattern: Horizontal Flush Panel

A panel with horizontically aligned two child elements completely flushed to the right or left

Horizontal Flush

A child element stay flushed to its side even if the other child element doesn't exist

Horizontal Flush left

Horizontal Flush right

If a child element is a long text element with ellipsis and no wrapping are enabled, its width must auto-sized to the other child element's min-width.

Horizontal Flush ellipsis

Techniques

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment