76 lines
2.5 KiB
CSS
76 lines
2.5 KiB
CSS
|
|
.left {
|
|
display: flex;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
|
|
/*
|
|
[-] horizontal [/] content [/] left [/]-pack [ ]-fit
|
|
[-] vertical [/]-parent [/] right [/] grow [ ] stretch
|
|
[/] top [/] space
|
|
[/] bottom [/] spread
|
|
[/]-center
|
|
*/
|
|
|
|
.horizontal, .vertical { display: flex; justify-content: center; align-items: center; width: auto; }
|
|
.horizontal { flex-direction: row; }
|
|
.vertical { flex-direction: column; }
|
|
.horizontal > *, .vertical > * { margin: 0px; flex-grow: 0; }
|
|
|
|
.width-parent { width: auto; }
|
|
.width-content { width: fit-content; }
|
|
|
|
.horizontal.child-left { justify-content: flex-start; }
|
|
.horizontal.child-center { }
|
|
.horizontal.child-right { justify-content: flex-end; }
|
|
.horizontal.child-top { align-items: flex-start; }
|
|
.horizontal.child-bottom { align-items: flex-end; }
|
|
.vertical.child-left { align-items: flex-start; }
|
|
.vertical.child-center { align-items: center; }
|
|
.vertical.child-right { align-items: flex-end; }
|
|
.vertical.child-top { justify-content: flex-start; }
|
|
.vertical.child-bottom { justify-content: flex-end; }
|
|
|
|
.horizontal.child-pack > * { flex-grow: 0; }
|
|
.horizontal.child-space { justify-content: space-around; }
|
|
.horizontal.child-spread { justify-content: space-between; }
|
|
.horizontal.child-grow > * { flex-grow: 1; }
|
|
.vertical.child-pack > * { flex-grow: 0; }
|
|
.vertical.child-space { justify-content: space-around; }
|
|
.vertical.child-spread { justify-content: space-between; }
|
|
.vertical.child-grow > * { flex-grow: 1; }
|
|
|
|
.horizontal.child-fit, .vertical.child-fit { }
|
|
.horizontal.child-stretch, .vertical.child-stretch { align-items: stretch; }
|
|
|
|
|
|
.horizontal {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
[class*="gap"] { display: flex; gap: 10px; }
|
|
.gap-small { gap: var(--small-space); }
|
|
.gap-medium { gap: var(--medium-space); }
|
|
.gap-big { gap: var(--big-space); }
|
|
|
|
[class*="margin"] { margin: 0px; --margin-size: var(--small-space); }
|
|
.margin-small { --margin-size: var(--small-space); }
|
|
.margin-medium { --margin-size: var(--medium-space); }
|
|
.margin-big { --margin-size: var(--big-space); }
|
|
.margin { margin: var(--margin-size); }
|
|
.margin-left { margin-left: var(--margin-size); }
|
|
.margin-right { margin-right: var(--margin-size); }
|
|
.margin-top { margin-top: var(--margin-size); }
|
|
.margin-bottom { margin-bottom: var(--margin-size); }
|
|
|