/*
 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: 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"] { }
/*
 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; }