web-330/flex-layout.css at main · nbujri/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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
    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: 0.5rem;
  padding-left: 0.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);
}