some modification to global css, but it's not good anymore
This commit is contained in:
@@ -2,7 +2,8 @@
|
||||
/*
|
||||
DATA-FLEX
|
||||
|
||||
direction width position main axis cross axis
|
||||
direction width childrens childrens childrens
|
||||
position main axis cross axis
|
||||
|
||||
[/]-horizontal [/]-parent [/]-center [/]-pack [/]-fit
|
||||
[/] vertical [/] content [/] left [/]-wrap [/] stretch
|
||||
@@ -31,32 +32,32 @@
|
||||
/*
|
||||
width : -parent- content
|
||||
*/
|
||||
[data-flex~="parent"] { width: auto; }
|
||||
[data-flex~="parent"] { width: 100%; }
|
||||
[data-flex~="content"] { width: fit-content; }
|
||||
/*
|
||||
position : -center- left right top bottom
|
||||
*/
|
||||
[data-flex~="left"] ,[data-flex~="vertical"][data-flex~="left"] { align-items: flex-start; text-align: left; }
|
||||
[data-flex~="right"] ,[data-flex~="vertical"][data-flex~="right"] { align-items: flex-end; text-align: right; }
|
||||
[data-flex~="top"] ,[data-flex~="vertical"][data-flex~="top"] { justify-content: flex-start; }
|
||||
[data-flex~="bottom"] ,[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
|
||||
[data-flex~="center"] ,[data-flex~="vertical"][data-flex~="center"] { align-items: center; text-align: center; }
|
||||
[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~="pack"] > * ,[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
|
||||
[data-flex~="space"] ,[data-flex~="vertical"][data-flex~="space"] { justify-content: space-around; }
|
||||
[data-flex~="spread"] ,[data-flex~="vertical"][data-flex~="spread"] { justify-content: space-between; }
|
||||
[data-flex~="grow"] > * ,[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
|
||||
[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
|
||||
|
||||
Reference in New Issue
Block a user