5a443e6672
- added functionnal css for flexbox positionning - changed cv infos order according to real cv
60 lines
2.2 KiB
CSS
60 lines
2.2 KiB
CSS
|
|
.left {
|
|
display: flex;
|
|
margin-left: 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 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|