1 | @import 'variables';
|
2 |
|
3 | $flex-item-spacing: 5px !default;
|
4 |
|
5 |
|
6 | @mixin flex-direction($arguments...) {
|
7 | flex-direction: $arguments;
|
8 |
|
9 |
|
10 |
|
11 | min-width: 0;
|
12 | min-height: 0;
|
13 | }
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | .flex-row,
|
19 | .flex-row-reverse,
|
20 | .flex-column,
|
21 | .flex-column-reverse {
|
22 | display: flex;
|
23 | }
|
24 |
|
25 | .flex-row {
|
26 | @include flex-direction(row);
|
27 | }
|
28 |
|
29 | .flex-row-reverse {
|
30 | @include flex-direction(row-reverse);
|
31 | }
|
32 |
|
33 | .flex-column {
|
34 | @include flex-direction(column);
|
35 | }
|
36 |
|
37 | .flex-column-reverse {
|
38 | @include flex-direction(column-reverse);
|
39 | }
|
40 |
|
41 |
|
42 | .flex-nowrap { flex-wrap: nowrap; }
|
43 | .flex-wrap { flex-wrap: wrap; }
|
44 | .flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
45 |
|
46 |
|
47 | .justify-content-start { justify-content: flex-start; }
|
48 | .justify-content-end { justify-content: flex-end; }
|
49 | .justify-content-center { justify-content: center; }
|
50 | .justify-content-space-between { justify-content: space-between; }
|
51 | .justify-content-space-around { justify-content: space-around; }
|
52 |
|
53 |
|
54 | .align-items-start { align-items: flex-start; }
|
55 | .align-items-end { align-items: flex-end; }
|
56 | .align-items-center { align-items: center; }
|
57 | .align-items-stretch { align-items: stretch; }
|
58 | .align-items-baseline { align-items: baseline; }
|
59 |
|
60 |
|
61 | .align-self-start { align-self: flex-start; }
|
62 | .align-self-end { align-self: flex-end; }
|
63 | .align-self-center { align-self: center; }
|
64 | .align-self-stretch { align-self: stretch; }
|
65 | .align-self-baseline { align-self: baseline; }
|
66 |
|
67 |
|
68 | .flex-row-xs,
|
69 | .flex-row-sm,
|
70 | .flex-row-md,
|
71 | .flex-row-lg,
|
72 | .flex-row-xl {
|
73 | display: flex;
|
74 | }
|
75 |
|
76 | .flex-row-xs {
|
77 | @include flex-direction(row);
|
78 | }
|
79 |
|
80 | @mixin flex-row-responsive($size) {
|
81 | @media (min-width: $size) {
|
82 | @include flex-direction(row);
|
83 | }
|
84 | }
|
85 |
|
86 | .flex-row-sm,
|
87 | .flex-row-md,
|
88 | .flex-row-lg,
|
89 | .flex-row-xl {
|
90 | @include flex-direction(column);
|
91 | }
|
92 |
|
93 | .flex-row-sm {
|
94 | @include flex-row-responsive($sm-min);
|
95 | }
|
96 |
|
97 | .flex-row-md {
|
98 | @include flex-row-responsive($md-min);
|
99 | }
|
100 |
|
101 | .flex-row-lg {
|
102 | @include flex-row-responsive($lg-min);
|
103 | }
|
104 |
|
105 | .flex-row-xl {
|
106 | @include flex-row-responsive($xl-min);
|
107 | }
|
108 |
|
109 | .flex-item {
|
110 | margin: $flex-item-spacing;
|
111 | }
|