/* Debug */

.debug .flex {
    box-shadow:0 0 0 2px red;
}
.debug .flex > * {
    box-shadow:0 0 0 1px blue;
}

/* Grid */

.flex {
    display:flex;
}

.inline.flex {
    display:inline-flex;
    height:initial !important;
}

.flex.wrap {
    flex-wrap:wrap;
}

.flex.stretch {
    align-items:stretch;
    height:100%;
}
.flex.vcenter {
    align-items:center;
    height:100%;
}

.flex.hcenter {
    justify-content:center;
}
    

.flex.grow > * {
    flex:1;
}

.flex > .grow-1 {
    flex-grow:1;
}
.flex > .grow-2 {
    flex-grow:2;
}

.flex.padded-1 > * {
    padding:1rem;
}