%%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>