some modification to global css, but it's not good anymore

This commit is contained in:
asus
2023-11-23 19:30:15 +01:00
parent ce1b541f29
commit 9fa4e3a22a
6 changed files with 57 additions and 53 deletions

View File

@@ -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