94 lines
1.5 KiB
Plaintext
94 lines
1.5 KiB
Plaintext
|
/* ----------------------------------------- */
|
||
|
|
/* Flexbox */
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
|
||
|
|
.flexrow {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row wrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
|
||
|
|
> * {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex1 { flex: 1; }
|
||
|
|
.flex2 { flex: 2; }
|
||
|
|
.flex3 { flex: 3; }
|
||
|
|
.flex4 { flex: 4; }
|
||
|
|
.flex5 { flex: 5; }
|
||
|
|
.flex6 { flex: 6; }
|
||
|
|
.flex7 { flex: 7; }
|
||
|
|
.flex8 { flex: 8; }
|
||
|
|
.flex9 { flex: 9; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.flexcol {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column nowrap;
|
||
|
|
//flex-direction: column;
|
||
|
|
//flex-wrap: nowrap;
|
||
|
|
|
||
|
|
> * {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex1 { flex: 1; }
|
||
|
|
.flex2 { flex: 2; }
|
||
|
|
.flex3 { flex: 3; }
|
||
|
|
.flex4 { flex: 4; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-group-center,
|
||
|
|
.flex-group-left,
|
||
|
|
.flex-group-right {
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
padding: 5px;
|
||
|
|
//border: 1px solid #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-group-left {
|
||
|
|
justify-content: flex-start;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-group-right {
|
||
|
|
justify-content: flex-end;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left {
|
||
|
|
text-align: left;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
justify-content: flex-end;
|
||
|
|
text-align: right;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-center {
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-between {
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-wrap {
|
||
|
|
flex-wrap: nowrap !important;
|
||
|
|
}
|