plugn/flexbox.html

## flexbox.html
<!DOCTYPE HTML>
<html>
    <head>
        <!-- HBox and VBox layouts have been implementated with many libraries/toolkits on
            different platforms and languages (like ExtJS,QT,GTK,.NET...).
            This tries to achieve the same but with CSS only.

            Supported browsers: IE 10+, Safari 6.1, Latest FF, Chrome -->
        <style type="text/css">
            html, body {
                margin: 0;
                height: 100%;
            }
        </style>
        <style>
            /*Stack child items vertically*/
            .vbox {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;

                /*Align children vetically*/
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;

                -webkit-align-content: flex-start;
                -ms-flex-line-pack: start;
                align-content: flex-start;
            }
            /*Stack child items horizontally*/
            .hbox {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;

                /*Align children horizontally*/
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;

                -webkit-align-content: flex-start;
                -ms-flex-line-pack: start;
                align-content: flex-start;
            }
            /*Stretch item along parent's main-axis*/
            .flex {
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            /*Stretch item along parent's cross-axis*/
            .stretch {
                align-self: stretch;
            }

            /*Stack child items to the main-axis start*/
            .main-start {
                -webkit-justify-content: flex-start;
                -ms-flex-pack: flex-start;
                justify-content: flex-start;
            }
            /*Stack child items to the cross-axis start*/
            .cross-start {
                -webkit-align-items: flex-start;
                -ms-flex-align: flex-start;
                align-items: flex-start;

                -webkit-align-content: flex-start;
                -ms-flex-line-pack: start;
                align-content: flex-start;
            }
            /*Stack child items to the main-axis center*/
            .main-center {
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
            }
            /*Stack child items to the cross-axis center*/
            .cross-center {
                -webkit-align-items: center;
                -ms-flex-align: center;
                align-items: center;

                -webkit-align-content: center;
                -ms-flex-line-pack: center;
                align-content: center;
            }
            /*Stack child items to the main-axis end.*/
            .main-end {
                -webkit-justify-content: flex-end;
                -ms-flex-pack: end;
                justify-content: flex-end;
            }
            /*Stack child items to the cross-axis end.*/
            .cross-end {
                -webkit-align-items: flex-end;
                -ms-flex-align: flex-end;
                align-items: flex-end;

                -webkit-align-content: flex-end;
                -ms-flex-line-pack: end;
                align-content: flex-end;
            }
            /*Stretch child items along the cross-axis*/
            .cross-stretch {
                -webkit-align-items: stretch;
                -ms-flex-align: stretch;
                align-items: stretch;

                -webkit-align-content: stretch;
                -ms-flex-line-pack: stretch;
                align-content: stretch;
            }

            /*Wrap items to next line on main-axis*/
            .wrap {
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body class="vbox" style="height: 100%; width: 100%;">
        <div>Hello 1</div>
        <div class="flex hbox main-center cross-center wrap">
            <div>Hello 2.1</div>
            <div>Hello 2.2</div>
            <div>Hello 2.3</div>
        </div>
        <div>Hello 3</div>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<!-- HBox and VBox layouts have been implementated with many libraries/toolkits on
	different platforms and languages (like ExtJS,QT,GTK,.NET...).
	This tries to achieve the same but with CSS only.

	Supported browsers: IE 10+, Safari 6.1, Latest FF, Chrome -->
	<style type="text/css">
	html, body {
	margin: 0;
	height: 100%;
	}
	</style>
	<style>
	/Stack child items vertically/
	.vbox {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	/Align children vetically/
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;

	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	}
	/Stack child items horizontally/
	.hbox {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	/Align children horizontally/
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;

	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	}
	/Stretch item along parent's main-axis/
	.flex {
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	}
	/Stretch item along parent's cross-axis/
	.stretch {
	align-self: stretch;
	}

	/Stack child items to the main-axis start/
	.main-start {
	-webkit-justify-content: flex-start;
	-ms-flex-pack: flex-start;
	justify-content: flex-start;
	}
	/Stack child items to the cross-axis start/
	.cross-start {
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;

	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	}
	/Stack child items to the main-axis center/
	.main-center {
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	}
	/Stack child items to the cross-axis center/
	.cross-center {
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	}
	/Stack child items to the main-axis end./
	.main-end {
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	}
	/Stack child items to the cross-axis end./
	.cross-end {
	-webkit-align-items: flex-end;
	-ms-flex-align: flex-end;
	align-items: flex-end;

	-webkit-align-content: flex-end;
	-ms-flex-line-pack: end;
	align-content: flex-end;
	}
	/Stretch child items along the cross-axis/
	.cross-stretch {
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;

	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	}

	/Wrap items to next line on main-axis/
	.wrap {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	}
	</style>
	</head>
	<body class="vbox" style="height: 100%; width: 100%;">
	<div>Hello 1</div>
	<div class="flex hbox main-center cross-center wrap">
	<div>Hello 2.1</div>
	<div>Hello 2.2</div>
	<div>Hello 2.3</div>
	</div>
	<div>Hello 3</div>
	</body>
	</html>