- used data attributes for global flex css
- started grid layout
This commit is contained in:
asus
@@ -1,75 +1,69 @@
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
[-] horizontal [/] content [/] left [/]-pack [ ]-fit
|
||||
[-] vertical [/]-parent [/] right [/] grow [ ] stretch
|
||||
[/] top [/] space
|
||||
[/] bottom [/] spread
|
||||
[/]-center
|
||||
DATA-FLEX
|
||||
|
||||
direction width position main axis cross axis
|
||||
|
||||
[/]-horizontal [/]-parent [/]-center [/]-pack [/]-fit
|
||||
[/] vertical [/] content [/] left [/]-wrap [/] stretch
|
||||
[/] right [/] nowrap
|
||||
[/] top [/] grow
|
||||
[/] bottom [/] space
|
||||
[/] spread
|
||||
[/] gap
|
||||
-> for GAP, you can custom the value with 'style="--gap:?px;"'
|
||||
*/
|
||||
|
||||
.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 {
|
||||
[data-flex] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
[data-flex] > * {
|
||||
flex-grow: 0;
|
||||
}
|
||||
/*
|
||||
direction : -horizontal- vertical
|
||||
*/
|
||||
[data-flex~="horizontal"] { flex-direction: row; }
|
||||
[data-flex~="vertical"] { flex-direction: column; }
|
||||
/*
|
||||
width : -parent- content
|
||||
*/
|
||||
[data-flex~="parent"] { width: auto; }
|
||||
[data-flex~="content"] { width: fit-content; }
|
||||
/*
|
||||
position : -center- left right top bottom
|
||||
*/
|
||||
[data-flex~="horizontal"][data-flex~="left"] { justify-content: flex-start; }
|
||||
[data-flex~="horizontal"][data-flex~="right"] { justify-content: flex-end; }
|
||||
[data-flex~="horizontal"][data-flex~="top"] { align-items: flex-start; }
|
||||
[data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
|
||||
[data-flex~="horizontal"][data-flex~="center"] { }
|
||||
[data-flex~="vertical"][data-flex~="left"] { align-items: flex-start; }
|
||||
[data-flex~="vertical"][data-flex~="right"] { align-items: flex-end; }
|
||||
[data-flex~="vertical"][data-flex~="top"] { justify-content: flex-start; }
|
||||
[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
|
||||
[data-flex~="vertical"][data-flex~="center"] { align-items: center; }
|
||||
/*
|
||||
main axis : -pack- space spread grow wrap gap
|
||||
*/
|
||||
[data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
|
||||
[data-flex~="horizontal"][data-flex~="space"] { justify-content: space-around; }
|
||||
[data-flex~="horizontal"][data-flex~="spread"] { justify-content: space-between; }
|
||||
[data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
|
||||
[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
|
||||
[data-flex~="vertical"][data-flex~="space"] { justify-content: space-around; }
|
||||
[data-flex~="vertical"][data-flex~="spread"] { justify-content: space-between; }
|
||||
[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
|
||||
[data-flex~="wrap"] { flex-wrap: wrap; }
|
||||
/*
|
||||
cross axis : -fit- stretch
|
||||
*/
|
||||
[data-flex~="horizontal"][data-flex~="fit"],
|
||||
[data-flex~="vertical"][data-flex~="fit"] { }
|
||||
[data-flex~="horizontal"][data-flex~="stretch"],
|
||||
[data-flex~="vertical"][data-flex~="stretch"] { align-items: stretch; }
|
||||
|
||||
[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); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user