/*Stack child items vertically*/
.vbox {
    display: flex;
    /*Align children vetically*/
    flex-direction: column;
    align-content: flex-start;
    /*Prevent extending beyond boundaries*/
    overflow: hidden;
}

/*Stack child items horizontally*/
.hbox {
    display: flex;
    /*Align children horizontally*/
    flex-direction: row;
    align-content: flex-start;
    /*Prevent extending beyond boundaries*/
    overflow: hidden;
}

/*Stretch item along parent's main-axis*/
.flex {
    flex: 1 1 auto;
}

.flex-2 {
    flex: 2 1 auto;
}

.flex-3 {
    flex: 3 0 auto;
}

.flex-4 {
    flex: 4 0 auto;
}

.flex-5 {
    flex: 5 0 auto;
}

.flex-6 {
    flex: 6 0 auto;
}

.flex-7 {
    flex: 7 0 auto;
}

.flex-8 {
    flex: 8 0 auto;
}

.flex-9 {
    flex: 9 0 auto;
}

/*Stretch item along parent's cross-axis Overrides any cross-* class of parent*/
.stretch-self {
    align-self: stretch;
}

/*Center item along parent's cross-axis. Overrides any cross-* class of parent*/
.center-self {
    align-self: center;
}

/*Stack child items to the main-axis start*/
.main-start {
    justify-content: flex-start;
}

/*Stack child items to the cross-axis start*/
.cross-start {
    align-items: flex-start;
    align-content: flex-start;
}

/*Stack child items to the main-axis center*/
.main-center {
    justify-content: center;
}

/*Stack child items to the cross-axis center*/
.cross-center {
    align-items: center;
    align-content: center;
}

/*Stack child items to the main-axis end.*/
.main-end {
    justify-content: flex-end;
}

.space-between {
    justify-content: space-between;
}

/*Stack child items to the cross-axis end.*/
.cross-end {
    align-items: flex-end;
    align-content: flex-end;
}

/*Stretch child items along the cross-axis*/
.cross-stretch {
    align-items: stretch;
    align-content: stretch;
}

/*Wrap items to next line on main-axis*/
.wrap {
    flex-wrap: wrap;
}