/* container */

.flex
{
    display:flex;
    -webkit-display:flex;

    align-items:center;
    -webkit-align-items:center;
}

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

.flex.top
{
    align-items:flex-start;
    -webkit-align-items:flex-start;
}

.flex.bot
{
    align-items:flex-end;
    -webkit-align-items:flex-end;
}

.flex.bl
{
    align-items: baseline;
    -webkit-align-items: baseline;
}

.flex.right
{
    flex-direction: row-reverse;
}

.flex.height
{
    align-items:stretch;
    -webkit-align-items:stretch;
}

.flex.around
{
    justify-content:space-around;
    -webkit-justify-content:space-around;
}

.flex.full
{
    justify-content:space-between;
    -webkit-justify-content:space-between;
}

.flex.flex100
{
    width: 100%;
    max-width: 100%;
}

.flex.g10
{
    gap: 10px;
}

.flex.g20
{
    gap: 20px;
}

/* element */

.flexFix
{
    flex-grow:0;
    -webkit-flex-grow:0;

    flex-shrink:0;
    -webkit-flex-shrink:0;
}


.flexMore
{
    flex-grow:1;
    -webkit-flex-grow:1;

    flex-shrink:0;
    -webkit-flex-shrink:0;

    max-width: 100%;
}

.flexW1
{
    flex-grow:1;
    -webkit-flex-grow:1;

    flex-shrink:2;
    -webkit-flex-shrink:2;
}

.flexW2
{
    flex-grow:2;
    -webkit-flex-grow:2;

    flex-shrink:1;
    -webkit-flex-shrink:1;
}