60 lines
1.9 KiB
Text
60 lines
1.9 KiB
Text
// Parent utilities
|
|
.flex { display: flex; }
|
|
.inline-flex { display: inline-flex; }
|
|
.flex-row { flex-direction: row; }
|
|
.flex-row-reverse { flex-direction: row-reverse; }
|
|
.flex-col { flex-direction: column; }
|
|
.flex-col-reverse { flex-direction: column-reverse; }
|
|
.flex-wrap { flex-wrap: wrap; }
|
|
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
|
.flex-nowrap { flex-wrap: nowrap; }
|
|
|
|
.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; }
|
|
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
|
|
// Child utilities
|
|
.flex-auto { flex: auto; }
|
|
.flex-initial { flex: initial; }
|
|
.flex-none { flex: none; }
|
|
.flex-grow { flex-grow: 1; }
|
|
.flex-shrink { flex-shrink: 1; }
|
|
.flex-no-grow { flex-grow: 0; }
|
|
.flex-no-shrink { flex-shrink: 0; }
|
|
|
|
.responsive({
|
|
&flex { .flex; }
|
|
&inline-flex { .inline-flex; }
|
|
&flex-row { .flex-row; }
|
|
&flex-row-reverse { .flex-row-reverse; }
|
|
&flex-col { .flex-col; }
|
|
&flex-col-reverse { .flex-col-reverse; }
|
|
&flex-wrap { .flex-wrap; }
|
|
&flex-wrap-reverse { .flex-wrap-reverse; }
|
|
&flex-nowrap { .flex-nowrap; }
|
|
&items-start { .items-start; }
|
|
&items-end { .items-end; }
|
|
&items-center { .items-center; }
|
|
&items-baseline { .items-baseline; }
|
|
&items-stretch { .items-stretch; }
|
|
&justify-start { .justify-start; }
|
|
&justify-end { .justify-end; }
|
|
&justify-center { .justify-center; }
|
|
&justify-between { .justify-between; }
|
|
&justify-around { .justify-around; }
|
|
&flex-auto { .flex-auto; }
|
|
&flex-initial { .flex-initial; }
|
|
&flex-none { .flex-none; }
|
|
&flex-grow { .flex-grow; }
|
|
&flex-shrink { .flex-shrink; }
|
|
&flex-no-grow { .flex-no-grow; }
|
|
&flex-no-shrink { .flex-no-shrink; }
|
|
});
|