/* Demo by Christian Krammer, ck@css3files.com, http://www.css3files.com */

/* Official specifications: http://www.w3.org/TR/css3-flexbox/#flex-wrap-property */

/* New syntax of Flexible box layout module (flexbox) */
.flexbox {
	display: -webkit-flex; /* Further values: -webkit-inline-flex, then it's an inline element */
	-webkit-flex-direction: row; /* Alignment (in this case from left to right). Further values: column (top to bottom), row-reverse (right to left), column-reverse (bottom to top) */
    /* -webkit-flex-flow: row; */ /* Same as -webkit-flex-direction, but it's a shorthand for both -webkit-flex-direction und -webkit-flex-wrap (see .flexbox6) */ 
    height: 100px;
    background: lightgrey;
}

.flexbox1 .item {background: red; height: 100px}

.flexbox1 .item + .item {margin-left: 10px}

.flexbox1 .item1 {width: 200px}

.flexbox1 .item2 {-webkit-flex: 1} /* States that the middle element is assigned the remaining space */

.flexbox1 .item3 {width: 150px}


.flexbox2 .item {background: green; height: 100px}

.flexbox2 .item + .item {margin-left: 10px}

.flexbox2 .item1 {-webkit-flex: 1} /* The first and the second element take up the 1/4 of the available space */

.flexbox2 .item2 {-webkit-flex: 1}

.flexbox2 .item3 {-webkit-flex: 2} /* The third element takes up 2/4 */


.flexbox3 {
	-webkit-flex-direction: column;
	width: 100px;
	height: 300px;
}

.flexbox3 .item {background: blue}

.flexbox3 .item + .item {margin-top: 10px}

.flexbox3 .item1 {-webkit-flex: 1} /* The first and the third element take tp 1/10 of the space */

.flexbox3 .item2 {-webkit-flex: 8} /* The second one takes up 8/10 */

.flexbox3 .item3 {-webkit-flex: 1}


.flexbox4 {
	-webkit-justify-content: flex-end; /* Horizontal alignment of the contained elements. Further values: flex-start, center, space-between (proportional distribution), space-around (proportional distribution, but with half the gap at the start and the end) */
}

.flexbox4 .item {background: magenta; width: 100px}

.flexbox4 .item + .item {margin-left: 10px}


.flexbox5 {
	-webkit-align-content: center; /* Vertical alignment of the container. Same possible values as with -webkit-justify-content. Only works when -webkit-flex-wrap: wrap is set (see .flexbox6) */
	-webkit-flex-wrap: wrap;
	height: 150px;
}

.flexbox5 .item {background: orange; -webkit-flex: 1; height: auto; border: 1px solid; height: 50px}

.flexbox5 .item1 {-webkit-order: 3} /* Order */

.flexbox5 .item2 {-webkit-order: 1}

.flexbox5 .item3 {-webkit-order: 2}


.flexbox6 {
	-webkit-flex-wrap: wrap; /* States how the elements wrap, if the remaining space doesn't suffice. Further values: nowrap (default value) und wrap-reverse (flips over the alignment) */
	width: 300px;
}

.flexbox6 .item {
	background: pink;
	border: 1px solid;
	-webkit-flex: 80px 1; /* The optional declaration of the width states how wide the element should be preferably. Since the container is 300px wide in this case, only three fit into it at the width of 80px each. The fourth gets pushed to the next line. "1" states that all the elements should take up an even amount of space */
} 


.flexbox7 .item {
	background: crimson;
	border: 1px solid;
	-webkit-flex: 1;
} 

.flexbox7 .item1 {
	max-width: 50px; /* Can be declared optionally and states the maximal width of the element. Overwrites -webkit-flex  */
} 

.flexbox7 .item3 {
	min-width: 500px; /* Can be declared optionally and states how wide an element must be at least. Overwrites -webkit-flex */
} 


.flexbox8 {
	-webkit-align-items: flex-end; /* Vertical alignment of the contained elements. Further values: flex-start, center, baseline (aligns all elements on the same baseline when different font sizes are set), stretch */
}

.flexbox8 .item {
	background: yellow;
	border: 1px solid;
} 

.flexbox8 .item1 {
	-webkit-flex: 2;
	height: 20px;
	/* -webkit-align-self: flex-end; */ /* -webkit-align-items can be overwritten by -webkit-align-self at each element */
} 

.flexbox8 .item2 {
	-webkit-flex: 3;
	height: 30px;
	/* -webkit-align-self: flex-start; */
} 

.flexbox8 .item3 {
	-webkit-flex: 1;
	height: 40px;
	/* -webkit-align-self: center; */
}