-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
flexboxes.css
134 lines (121 loc) · 3.98 KB
/
flexboxes.css
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/**
git.io/flexboxes
npm.im/flexboxes
**/
.flex-fade {flex: 0 1 auto}
.flex-fame {flex: 1 0 auto}
.flex-auto {flex: 1 1 auto}
.flex-none {flex: 0 0 auto}
.flex-inline {display: inline-flex}
.flex-block {display: flex}
.flow-east {flex-direction: row}
.flow-west {flex-direction: row-reverse}
.flow-south {flex-direction: column}
.flow-north {flex-direction: column-reverse}
.flow-over {flex-wrap: nowrap}
.flow-wrap {flex-wrap: wrap}
.flow-warp {flex-wrap: wrap-reverse}
.free-all {margin: auto}
.free-top {margin-top: auto}
.free-bottom {margin-bottom: auto}
.free-left {margin-left: auto}
.free-right {margin-right: auto}
.free-north {margin-block-start: auto}
.free-south {margin-block-end: auto}
.free-west {margin-inline-start: auto}
.free-east {margin-inline-end: auto}
.order-before {order: -1}
.order-after {order: 1}
.items-start {align-items: flex-start}
.items-end {align-items: flex-end}
.items-center {align-items: center}
.items-baseline {align-items: baseline}
.items-stretch {align-items: stretch}
.self-center {align-self: center}
.self-baseline {align-self: baseline}
.self-stretch {align-self: stretch}
.self-start {align-self: flex-start}
.self-end {align-self: flex-end}
.just-start {justify-content: flex-start}
.just-end {justify-content: flex-end}
.just-center {justify-content: center}
.just-between {justify-content: space-between}
.just-around {justify-content: space-around}
.pack-start {align-content: flex-start}
.pack-end {align-content: flex-end}
.pack-center {align-content: center}
.pack-between {align-content: space-between}
.pack-around {align-content: space-around}
.pack-stretch {align-content: stretch}
.area-min {min-height: 0; min-width: 0}
.area-max {max-height: 100%; max-width: 100%}
.grow-0 {flex-grow: 0}
.grow-1 {flex-grow: 1}
.grow-2 {flex-grow: 2}
.grow-3 {flex-grow: 3}
.grow-4 {flex-grow: 4}
.grow-5 {flex-grow: 5}
.grow-6 {flex-grow: 6}
.grow-7 {flex-grow: 7}
.grow-8 {flex-grow: 8}
.grow-9 {flex-grow: 9}
.grow-10 {flex-grow: 10}
.grow-11 {flex-grow: 11}
.grow-12 {flex-grow: 12}
.shrink-0 {flex-shrink: 0}
.shrink-1 {flex-shrink: 1}
.shrink-2 {flex-shrink: 2}
.shrink-3 {flex-shrink: 3}
.shrink-4 {flex-shrink: 4}
.shrink-5 {flex-shrink: 5}
.shrink-6 {flex-shrink: 6}
.shrink-7 {flex-shrink: 7}
.shrink-8 {flex-shrink: 8}
.shrink-9 {flex-shrink: 9}
.shrink-10 {flex-shrink: 10}
.shrink-11 {flex-shrink: 11}
.shrink-12 {flex-shrink: 12}
.basis-0 {flex-basis: 0%}
.basis-1 {flex-basis: 8.333333333%}
.basis-2 {flex-basis: 16.6666666666%}
.basis-3 {flex-basis: 25%}
.basis-4 {flex-basis: 33.3333333333%}
.basis-5 {flex-basis: 41.6666666666%}
.basis-6 {flex-basis: 50%}
.basis-7 {flex-basis: 58.333333333%}
.basis-8 {flex-basis: 66.6666666666%}
.basis-9 {flex-basis: 75%}
.basis-10 {flex-basis: 83.3333333333%}
.basis-11 {flex-basis: 91.6666666666%}
.basis-12 {flex-basis: 100%}
.basis-100vw {flex-basis: 100vw}
.basis-100vh {flex-basis: 100vh}
.basis-100vmax {flex-basis: 100vmax}
.basis-100vmin {flex-basis: 100vmin}
.basis-golden {flex-basis: 61.803398875%}
.basis-auto {flex-basis: auto}
.basis-content {flex-basis: content}
@media (orientation: portrait) {
.flex-inline\@portrait {display: inline-flex}
.flex-block\@portrait {display: flex}
.flow-east\@portrait {flex-direction: row}
.flow-west\@portrait {flex-direction: row-reverse}
.flow-south\@portrait {flex-direction: column}
.flow-north\@portrait {flex-direction: column-reverse}
.flow-over\@portrait {flex-wrap: nowrap}
.flow-wrap\@portrait {flex-wrap: wrap}
.flow-warp\@portrait {flex-wrap: wrap-reverse}
}
@media (orientation: landscape) {
.flex-inline\@landscape {display: inline-flex}
.flex-block\@landscape {display: flex}
.flow-east\@landscape {flex-direction: row}
.flow-west\@landscape {flex-direction: row-reverse}
.flow-south\@landscape {flex-direction: column}
.flow-north\@landscape {flex-direction: column-reverse}
.flow-over\@landscape {flex-wrap: nowrap}
.flow-wrap\@landscape {flex-wrap: wrap}
.flow-warp\@landscape {flex-wrap: wrap-reverse}
}
/* git.io/honorhidden */
[hidden] {display: none}