Skip to content

Instantly share code, notes, and snippets.

@rikumi
Created September 9, 2017 10:46
Show Gist options
  • Save rikumi/fb1c07b34e312e0e5f9d3b33b8d688fc to your computer and use it in GitHub Desktop.
Save rikumi/fb1c07b34e312e0e5f9d3b33b8d688fc to your computer and use it in GitHub Desktop.
A DSL for CSS3 flexbox
/*
32 Combinations of CSS3 flexbox
Usage Example: <div flex="↖-↗~"/> (row, wrap, align=flex-start + justify=space-between)
<div flex="|·"> (column, center + center)
<p flex="!"/> (flex-grow: 1)
</div>
1. row: - (ALIGN JUSTIFY)
+ + +
↖ (start start) | ↑ (start center) | ↗ (start end) | ↖ ↗ (start between)
+-------------------+--------------------+-------------------+-------------------------+
← (center start) | · (center center) | → (center end) | ← → (center between)
+-------------------+--------------------+-------------------+-------------------------+
↙ (end start) | ↓ (end center) | ↘ (end end) | ↙ ↘ (end between)
+-------------------+--------------------+-------------------+-------------------------+
↖ | ↑ | ↗ |
↙ (stretch start) | ↓ (stretch center) | (stretch end) ↘ | + (stretch between)
+ + +
*/
[flex*="-"] {
display: flex;
flex-direction: row;
}
[flex*="-"][flex*="↑"] {
align-items: flex-start;
justify-content: center;
}
[flex*="-"][flex*="↗"] {
align-items: flex-start;
justify-content: flex-end;
}
[flex*="-"][flex*="→"] {
align-items: center;
justify-content: flex-end;
}
[flex*="-"][flex*="↘"] {
align-items: flex-end;
justify-content: flex-end;
}
[flex*="-"][flex*="↓"] {
align-items: flex-end;
justify-content: center;
}
[flex*="-"][flex*="↙"] {
align-items: flex-end;
justify-content: flex-start;
}
[flex*="-"][flex*="←"] {
align-items: center;
justify-content: flex-start;
}
[flex*="-"][flex*="↖"] {
align-items: flex-start;
justify-content: flex-start;
}
[flex*="-"][flex*="·"] {
align-items: center;
justify-content: center;
}
[flex*="-"][flex*="↖"][flex*="↙"] {
align-items: stretch;
justify-content: flex-start;
}
[flex*="-"][flex*="↑"][flex*="↓"], [flex*="-"][flex*="↕"] {
align-items: stretch;
justify-content: center;
}
[flex*="-"][flex*="↗"][flex*="↘"] {
align-items: stretch;
justify-content: flex-end;
}
[flex*="-"][flex*="↖"][flex*="↗"] {
align-items: flex-start;
justify-content: space-between;
}
[flex*="-"][flex*="←"][flex*="→"], [flex*="-"][flex*="↔"] {
align-items: center;
justify-content: space-between;
}
[flex*="-"][flex*="↙"][flex*="↘"] {
align-items: flex-end;
justify-content: space-between;
}
[flex*="-"][flex*="+"] {
align-items: stretch;
justify-content: space-between;
}
/*
2. column: - (ALIGN JUSTIFY)
+ + +
↖ (start start) | ↑ (center start) | ↗ (end start) | ↖ ↗ (stretch start)
+-------------------+--------------------+-------------------+-------------------------+
← (start center) | · (center center) | → (end center) | ← → (stretch center)
+-------------------+--------------------+-------------------+-------------------------+
↙ (start end) | ↓ (center end) | ↘ (end end) | ↙ ↘ (stretch end)
+-------------------+--------------------+-------------------+-------------------------+
↖ | ↑ | ↗ |
↙ (start between) | ↓ (center between) | (end between) ↘ | + (stretch between)
+ + +
*/
[flex*="|"] {
display: flex;
flex-direction: column;
}
[flex*="|"][flex*="↑"] {
align-items: center;
justify-content: flex-start;
}
[flex*="|"][flex*="↗"] {
align-items: flex-end;
justify-content: flex-start;
}
[flex*="|"][flex*="→"] {
align-items: flex-end;
justify-content: center;
}
[flex*="|"][flex*="↘"] {
align-items: flex-end;
justify-content: flex-end;
}
[flex*="|"][flex*="↓"] {
align-items: center;
justify-content: flex-end;
}
[flex*="|"][flex*="↙"] {
align-items: flex-start;
justify-content: flex-end;
}
[flex*="|"][flex*="←"] {
align-items: flex-start;
justify-content: center;
}
[flex*="|"][flex*="↖"] {
align-items: flex-start;
justify-content: flex-start;
}
[flex*="|"][flex*="·"] {
align-items: center;
justify-content: center;
}
[flex*="|"][flex*="↖"][flex*="↗"] {
align-items: stretch;
justify-content: flex-start;
}
[flex*="|"][flex*="←"][flex*="→"], [flex*="|"][flex*="↔"] {
align-items: stretch;
justify-content: center;
}
[flex*="|"][flex*="↙"][flex*="↘"] {
align-items: stretch;
justify-content: flex-end;
}
[flex*="|"][flex*="↖"][flex*="↙"] {
align-items: flex-start;
justify-content: space-between;
}
[flex*="|"][flex*="↑"][flex*="↓"], [flex*="|"][flex*="↕"] {
align-items: center;
justify-content: space-between;
}
[flex*="|"][flex*="↗"][flex*="↘"] {
align-items: flex-end;
justify-content: space-between;
}
[flex*="|"][flex*="+"] {
align-items: stretch;
justify-content: space-between;
}
/*
3. tools:
~ (wrap)
! (grow)
= (noshrink)
*/
[flex*="~"], [flex~="wrap"] {
flex-wrap: wrap;
}
[flex*="!"], [flex~="grow"] {
flex-grow: 1;
}
[flex*="="], [flex~="noshrink"] {
flex-shrink: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment