-
Notifications
You must be signed in to change notification settings - Fork 0
/
Flex.ts
30 lines (26 loc) · 1.46 KB
/
Flex.ts
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
import { CSSProperties } from "@material-ui/core/styles/withStyles"
export default () => {
// creates flex classes
return {
row: { display: "flex", flexFlow: "row", flexWrap: "nowrap" } as CSSProperties,
column: { display: "flex", flexFlow: "column", flexWrap: "nowrap" } as CSSProperties,
wrap: { flexWrap: "wrap" } as CSSProperties,
noWrap: { flexWrap: "nowrap" } as CSSProperties,
itemsStart: { alignItems: "flex-start" } as CSSProperties,
itemsCenter: { alignItems: "center" } as CSSProperties,
itemsEnd: { alignItems: "flex-end" } as CSSProperties,
itemsStretch: { alignItems: "stretch" } as CSSProperties,
justifyStart: { justifyContent: "flex-start" } as CSSProperties,
justifyCenter: { justifyContent: "center" } as CSSProperties,
justifyEnd: { justifyContent: "flex-end" } as CSSProperties,
justifyBetween: { justifyContent: "space-between" } as CSSProperties,
justifyEvenly: { justifyContent: "space-evenly" } as CSSProperties,
justifyStretch: { justifyContent: "stretch" } as CSSProperties,
selfStart: { alignSelf: "flex-start" } as CSSProperties,
selfCenter: { alignSelf: "center" } as CSSProperties,
selfEnd: { alignSelf: "flex-end" } as CSSProperties,
selfStretch: { alignSelf: "stretch" } as CSSProperties,
flexGrow: { flexGrow: 1 } as CSSProperties,
flexShrink: { flexShrink: 1 } as CSSProperties
}
}