%%html
<style>
/* hbox and vbox classes */
 
.hbox {
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-align: stretch;
 
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-align: stretch;
 
	display: box;
	box-orient: horizontal;
	box-align: stretch;

    background: yellow;
    padding: 5px;
}
 
.hbox > * {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
	display: block;
}
 
.vbox {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: stretch;
 
	display: -moz-box;
	-moz-box-orient: vertical;
	-moz-box-align: stretch;
 
	display: box;
	box-orient: vertical;
	box-align: stretch;

    background: yellow;
    padding: 5px;
}
 
.vbox > * {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
	display: block;
}
 
.spacer {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}
 
.reverse {
	-webkit-box-direction: reverse;
	-moz-box-direction: reverse;
	box-direction: reverse;
}
 
.boxFlex0 {
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	box-flex: 0;
}
 
.boxFlex1, .boxFlex {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
}
 
.boxFlex2 {
	-webkit-box-flex: 2;
	-moz-box-flex: 2;
	box-flex: 2;
}
 
.boxGroup1 {
	-webkit-box-flex-group: 1;
	-moz-box-flex-group: 1;
	box-flex-group: 1;
}
 
.boxGroup2 {
	-webkit-box-flex-group: 2;
	-moz-box-flex-group: 2;
	box-flex-group: 2;
}
 
.start {
	-webkit-box-pack: start;
	-moz-box-pack: start;
	box-pack: start;
}
 
.end {
	-webkit-box-pack: end;
	-moz-box-pack: end;
	box-pack: end;
}
 
.center {
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
}

.align-start {
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
}

.align-end {
    -webkit-box-align: end;
    -moz-box-align: end;
    box-align: end;
}

.align-center {
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}


/*****************************************************************************************
 NEW FLEX MODEL
*****************************************************************************************/
 
.fhbox {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    background: purple;
    padding: 5px;
}
 
.fhbox > * {
    flex: none;
}
 
.fvbox {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    background: purple;
    padding: 5px;
}
 
.fvbox > * {
    flex: none;
}
 
.freverse {
    flex-direction: column-reverse;
}
 
.fboxFlex0 {
    flex: none;
}
 
.fboxFlex1, .boxFlex {
    flex: 1;
}
 
.fboxFlex2 {
    flex: 2;
}
 
.fstart {
    justify-content: flex-start;
}
 
.fend {
    justify-content: flex-end;
}
 
.fcenter {
    justify-content: center;
}

.falign-start {
    /* align-content: flex-start;*/
    align-items: flex-start;
}

.falign-end {
    /*align-content: flex-end;*/
    align-items: flex-end;
}

.falign-center {
    /*align-content: center;*/
    align-items: center;
}

.a {
background: red;
}

.b {
background: blue;
}

.c {
background: green;
}

.s1 {
width: 1em;
height: 1em;
}

.s2 {
width: 2em;
height: 2em;
}

.s3 {
width: 3em;
height: 3em;
}

</style>

%%html
<div class="hbox">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>

%%html
<div class="fhbox">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>

%%html
<div class="vbox">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>

%%html
<div class="fvbox">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>

%%html
<div class="hbox">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox start">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox fstart">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox center">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox fcenter">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox end">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox fend">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox align-start">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox falign-start">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox align-center">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox falign-center">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox align-end">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fhbox falign-end">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="vbox start">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fvbox fstart">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="vbox center">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fvbox fcenter">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="vbox end">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fvbox fend">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="vbox align-start">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fvbox falign-start">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="vbox align-center">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fvbox falign-center">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="vbox align-end">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="fvbox falign-end">
<div class="a s1">A</div>
<div class="b s2">B</div>
<div class="c s3">C</div>
</div>

%%html
<div class="hbox">
<div class="a">A</div>
<div class="b boxFlex0">B</div>
<div class="c">C</div>
</div>

%%html
<div class="fhbox">
<div class="a">A</div>
<div class="b fboxFlex0">B</div>
<div class="c">C</div>
</div>

%%html
<div class="hbox">
<div class="a boxFlex0">A</div>
<div class="b boxFlex0">B</div>
<div class="c boxFlex1">C</div>
</div>

%%html
<div class="fhbox">
<div class="a fboxFlex0">A</div>
<div class="b fboxFlex0">B</div>
<div class="c fboxFlex1">C</div>
</div>

%%html
<div class="hbox">
<div class="a boxFlex0">A</div>
<div class="b boxFlex1">B</div>
<div class="c boxFlex2">C</div>
</div>

%%html
<div class="fhbox">
<div class="a fboxFlex0">A</div>
<div class="b fboxFlex1">B</div>
<div class="c fboxFlex2">C</div>
</div>

%%html
<div class="hbox">
<div class="a boxFlex1">A</div>
<div class="b boxFlex1">B</div>
<div class="c boxFlex2">C</div>
</div>

%%html
<div class="fhbox">
<div class="a fboxFlex1">A</div>
<div class="b fboxFlex1">B</div>
<div class="c fboxFlex2">C</div>
</div>