@charset "utf-8";

body {
	background-color: #f1f1f1;
}
h1 {
	text-align: center;
	font-size: 40px;
}
/*Make parent element a flex container*/
.flex-container ul {
	display: flex; /*or inline-flex*/ 
	flex-wrap: wrap-reverse; /*Keep on taking more flex items without breaking (wrapping)*/
	/*nowrap, wrap-reverse*/
	flex-flow: row wrap; /*direction 'row' and yes, please wrap the items.*/
	/*flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap*/
	justify-content: space-between; /*justify-content: flex-start, justify-content: center, justify-content: flex-end, justify-content: space-around*/ 
	align-items: baseline; /*align-items: flex-start, align-items: stretch,  align-items: flex-end, align-items: center*/
	align-content: stretch; /*align-content: flex-start, align-content: flex-end, align-content: center*/
	display: flex;/*flexbox activated*/
	align-items: center;
}

.flex-container li {
	width: 200px; 
	height: 100px;
	background-color: #8cacea; 
	margin: 8px;
	list-style: none;
	/*flex-grow: 20; /*give it a value higher than 0*/
	/*flex-shrink: 10;*/
	/*flex-basis: 10px;*/ /*auto, percentages, ems, rems, pixels, etc.*/ /*use 0px, not 0*/
	padding: 4px;/*some breathing space*/
	/*flex: "positive number" 1 1 1;*/
	flex: 2 1 0;/*same as flex: 2*/ /*flex shorthand for flex-grow: 0; flex-shrink: 1; flex-basis: auto; GSB*/ /*again, the ‘li’ represents any flex-item */
	/*this is an absolute flex item*/
	/*flex: 1 1;*/ /*flex-basis defaults to 0*/
	/*this is a relative flex item*/ 
	flex-basis: 20px;/*only flex-basis is set*/
	flex: auto;/*remember this is same as flex: 1 1 auto;*/
	border: 2px solid red;
	margin: 2em;
	/*flex: 1 1 auto is same as setting: flex-grow: 1 flex-shrink: 1 and flex-basis: auto*/
	flex: 1;/*same as flex: 1 1 0*/
	/*Absolute flex-items have their widths based solely on flex, while relative flex items have their widths based on content size*/
	flex-direction: column-reverse; /*column, row-reverse, column-reverse;*/
}

/*select first li element within the ul */ .flex-container li:nth-child(2) {  
order: 2; /*give it a value higher than 0*/
}

/*first flex-item*/ 
.flex-container li:nth-child(1){
	flex: 2 1 0; /*same as just writing flex: 2*/
}

/*second flex-item*/
.flex-container li:nth-child(2){
	flex: 1 1 0;
	background-color: #898989;
	align-self: flex-start; /*align-self: auto; align-self: flex-end; align-self: center; align-self: baseline; align-self: stretch*/ 
		flex: 0 0 auto;
	/*you may use the margin shorthand to set both sides of you wish*/
	margin-right: auto;/*applied only to the right*/
	margin-left: auto;/*applied only to the right*/
}

/*target first list item*/
.flex-container li:first-of-type{
	align-self: flex-end; /*align-self: auto; align-self: flex-start; align-self: center; align-self: baseline; align-self: stretch*/ 
}