Skip to content

Instantly share code, notes, and snippets.

@JonDum JonDum/layout.styl
Created Feb 10, 2015

Embed
What would you like to do?
Stylus Flexbox layout helper
/*
This helper function simplifies some of the flexbox
terminology. There are some layouts too advanced for this,
but in the majority of times this saves a lot of typing.
It's written with left, center, right always referring to
the horizontal axis, and top, middle, bottom always referring
to the vertical axis. 'reverse' is not supported because it
would make the helper way too complicated and hurt your brain.
Examples
// align items horizontally, top left
:host
layout horizontal top left
// align items vertically on the right edge, vertically centered (middle)
:host
layout vertical right middle
// align items horizontally on the bottom-left edge
:host
layout horizontal bottom left
:host
layout vertical nowrap bottom center
'reverse' is not supported because it would make the function overly-complex
and probably not be what you're expecting. It's also rare to have a need for
RTL layouts, so I excluded support that. If needed, drop-back down to
individual property:keys.
*/
layout()
a = arguments
if 'inline' in a
display inline-flex
else
display flex
if 'wrap-reverse' in a
flex-wrap wrap-reverse
if 'nowrap' in a
flex-wrap nowrap
else
flex-wrap wrap
if 'horizontal' in a
flex-direction row
// alignment horizontal axis
if 'left' in a
justify-content flex-start unless 'around' in a or 'between' in a
if 'right' in a
justify-content flex-end unless 'around' in a or 'between' in a
if 'center' in a
justify-content center unless 'around' in a or 'between' in a
if 'around' in a
justify-content space-around
if 'between' in a
justify-content space-between
// this s a nice default to have
align-content center unless 'around' in a or 'between' in a
//alignment vertical axis
if 'top' in a
align-content flex-start
align-items flex-start
else if 'bottom' in a
align-content flex-end
align-items flex-end
else if 'middle' in a
if 'tight' in a
align-content center
align-items center
else if 'stretch' in a
align-content stretch
if 'vertical' in a
flex-direction column
//alignment horizontal axis
if 'left' in a
align-items flex-start
unless 'loose' in a
align-content flex-start unless 'around' in a or 'between' in a
if 'right' in a
align-items flex-end
unless 'loose' in a
align-content flex-end unless 'around' in a or 'between' in a
if 'center' in a
align-items center
unless 'loose' in a
align-content center unless 'around' in a or 'between' in a
//alignment vertical axis
if 'top' in a
justify-content flex-start
if 'bottom' in a
justify-content flex-end
if 'middle' in a
justify-content center
if 'around' in a
align-content space-around
justify-content space-around
if 'between' in a
align-content space-between
justify-content space-between
if 'stretch' in a
justify-content stretch
#example-1
layout vertical left middle
#example-2
layout vertical center around
#example-3
layout horizontal center
-------------
#example-1 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
}
#example-2 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: space-around;
justify-content: space-around;
}
#example-3 {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.