Quick prototyping with flexbox

o.data-layout.scss

[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;
}