- added readme

- added functionnal css for flexbox positionning
- changed cv infos order according to real cv

styles/global.css

@@ -5,32 +5,47 @@
 }
 
 
-[class*="child-"] {
-	display: flex;
-	border: 1px solid blue;
-}
-[class*="child-"] > *, [class*="child-"][class*="-center"] > * {
-	margin: auto;
-}
-[class*="child-"][class*="-left"] > * {
-	margin-left: 0px;
-}
-[class*="child-"][class*="-right"] > * {
-	margin-right: 0px;
-}
-[class*="child-"][class*="-top"] > * {
-	margin-top: 0px;
-}
-[class*="child-"][class*="-bottom"] > * {
-	margin-bottom: 0px;
-}
-[class*="child-"][class*="-compact"] > * {
-	margin-bottom: 0px;
-}
-[class*="child-"][class*="-large"] > * {
-	margin-top: 0px;
-	margin-bottom: 0px;
-}
+/*
+
+ [-] horizontal  [/] content  [/] left    [/]-pack    [ ]-fit
+ [-] vertical    [/]-parent   [/] right   [/] grow    [ ] stretch
+                              [/] top     [/] space
+                              [/] bottom  [/] spread
+                              [/]-center
+*/
+
+[class*="child-"] { border: 1px solid blue; }
+
+[class*="horizontal"], [class*="vertical"] { display: flex; justify-content: center; align-items: center; width: auto; }
+[class*="horizontal"] { flex-direction: row; }
+[class*="vertical"]   { flex-direction: column; }
+[class*="horizontal"] > *, [class*="vertical"] > * { margin: 0px; flex-grow: 0; }
+
+[class*="-parent"]  { width: auto; }
+[class*="-content"] { width: fit-content; }
+
+[class*="horizontal"][class*="-left"]   { justify-content: flex-start; }
+[class*="horizontal"][class*="-center"] { }
+[class*="horizontal"][class*="-right"]  { justify-content: flex-end; }
+[class*="horizontal"][class*="-top"]    { align-items: flex-start; }
+[class*="horizontal"][class*="-bottom"] { align-items: flex-end; }
+[class*="vertical"][class*="-left"]   { align-items: flex-start; }
+[class*="vertical"][class*="-center"] { align-items: center; }
+[class*="vertical"][class*="-right"]  { align-items: flex-end; }
+[class*="vertical"][class*="-top"]    { justify-content: flex-start; }
+[class*="vertical"][class*="-bottom"] { justify-content: flex-end; }
+
+[class*="horizontal"][class*="-pack"] > * { flex-grow: 0; }
+[class*="horizontal"][class*="-space"]    { justify-content: space-around; }
+[class*="horizontal"][class*="-spread"]   { justify-content: space-between; }
+[class*="horizontal"][class*="-grow"] > * { flex-grow: 1; }
+[class*="vertical"][class*="-pack"] > * { flex-grow: 0; }
+[class*="vertical"][class*="-space"]    { justify-content: space-around; }
+[class*="vertical"][class*="-spread"]   { justify-content: space-between; }
+[class*="vertical"][class*="-grow"] > * { flex-grow: 1; }
+
+[class*="horizontal"][class*="-fit"],     [class*="vertical"][class*="-fit"]     { }
+[class*="horizontal"][class*="-stretch"], [class*="vertical"][class*="-stretch"] { align-items: stretch; }
 
 
 .horizontal {