gs-ui-components/gsui-flex.css at main · gridsound/gs-ui-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
gs-flex[ x ] { display: flex }
gs-flex[ y ] { display: flex; flex-direction: column; }

gs-flex[ inline ] { display: inline-flex }
gs-flex[ wrap ] { flex-wrap: wrap }

gs-flex[ x ][ rev ] { flex-direction: row-reverse }
gs-flex[ y ][ rev ] { flex-direction: column-reverse }

gs-flex[ x ][ xstart ]  { justify-content: start }
gs-flex[ x ][ xcenter ] { justify-content: center }
gs-flex[ x ][ xend ]    { justify-content: end }
gs-flex[ y ][ xstart ]  { align-items: start }
gs-flex[ y ][ xcenter ] { align-items: center }
gs-flex[ y ][ xend ]    { align-items: end }

gs-flex[ x ][ ystart ]  { align-items: start }
gs-flex[ x ][ ycenter ] { align-items: center }
gs-flex[ x ][ yend ]    { align-items: end }
gs-flex[ y ][ ystart ]  { justify-content: start }
gs-flex[ y ][ ycenter ] { justify-content: center }
gs-flex[ y ][ yend ]    { justify-content: end }

gs-flex[ f1 ] { flex: 1 }
gs-flex[ f2 ] { flex: 2 }
gs-flex[ f3 ] { flex: 3 }
gs-flex[ f4 ] { flex: 4 }
gs-flex[ f5 ] { flex: 5 }

gs-flex[ g2  ] { gap:  2px }
gs-flex[ g4  ] { gap:  4px }
gs-flex[ g6  ] { gap:  6px }
gs-flex[ g8  ] { gap:  8px }
gs-flex[ g10 ] { gap: 10px }
gs-flex[ g12 ] { gap: 12px }
gs-flex[ g14 ] { gap: 14px }
gs-flex[ g16 ] { gap: 16px }