web-330/flex-layout.css at main · JojerDojer/web-330 · 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
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
/**
    Title: flex-layout.css
    Author: Professor Krasso
    Date: 2/4/2021
    Description: Styling to build a reusable flex layout; inspired by Bootstrap and Angular FlexLayout
    Sources:
        Bootstrap: https://github.com/twbs/bootstrap
        Angular FlexLayout: https://github.com/angular/flex-layout
 */

 :root {
  --col-1: 8.33%;
  --col-2: 16.66%;
  --col-3: 25%;
  --col-4: 33.33%;
  --col-5: 41.66%;
  --col-6: 50%;
  --col-7: 58.33%;
  --col-8: 66.66%;
  --col-9: 75%;
  --col-10: 83.33%;
  --col-11: 91.66%;
  --col-12: 100%;
}

.container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  flex: 0 0 auto;
  padding-right: .5rem;
  padding-left: .5rem;
}

.col-1 { width: var(--col-1); }
.col-2 { width: var(--col-2); }
.col-3 { width: var(--col-3); }
.col-4 { width: var(--col-4); }
.col-5 { width: var(--col-5); }
.col-6 { width: var(--col-6); }
.col-7 { width: var(--col-7); }
.col-8 { width: var(--col-8); }
.col-9 { width: var(--col-9); }
.col-10 { width: var(--col-10); }
.col-11 { width: var(--col-11); }
.col-12 { width: var(--col-12); }