Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick prototyping with flexbox
[data-layout]{
position: relative;
display: flex;
}
//contains keyowords
[data-layout*="vertical"] { flex-direction: column; }
[data-layout*="wrap"] { flex-wrap: wrap; }
[data-layout*="between"] { justify-content: space-between; }
[data-layout*="center"] { justify-content: center; }
[data-layout*="around"] { justify-content: space-around; }
[data-layout*="end"] { justify-content: flex-end }
[data-layout*="baseline"] { align-items: baseline;}
[data-layout*="top"] { align-items: flex-start; }
[data-layout*="bottom"] { align-items: flex-end; }
[data-layout*="middle"] { align-items: center; }
[class*="--expander"]{
flex: 1;
}
[class*="--breaker"]{
flex: 1 1 100%;
}
[class*="--shy-left"]{
margin-left: auto;
}
[class*="--shy-right"]{
margin-left: auto;
}
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.