75 lines
3.1 KiB
CSS
75 lines
3.1 KiB
CSS
|
|
/*
|
|
DATA-FLEX
|
|
|
|
direction width childrens childrens childrens
|
|
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;"'
|
|
*/
|
|
[data-flex] {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: auto;
|
|
flex-wrap: nowrap;
|
|
}
|
|
[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: -moz-available; /* WebKit-based browsers will ignore this. */
|
|
width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
|
|
width: fill-available;
|
|
}
|
|
[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"] { }
|
|
/*
|
|
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~="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; }
|
|
|
|
|