/*青*/



li.colA{background:#999; color:#000;}
li.colB{background:#666; color:#000;}
li.colC{background:#333; color:#ccc;}
li.colD{background:#111; color:#fff;}

/*=====================================
flex-direction / flex-wrap
=====================================*/
#fb-row-nw{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	frex-wrap:nowrap;
}
#fb-row-re-nw{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row-reverse;
	frex-wrap:nowrap;
}
#fb-col-nw{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:column;
	frex-wrap:nowrap;
}
#fb-col-re-nw{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:column-reverse;
	frex-wrap:nowrap;
}

#fb-row-w {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	frex-wrap:wrap;
}
#fb-row-re-w {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row-reverse;
	frex-wrap:wrap;
}
#fb-col-w {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:column;
	frex-wrap:wrap;
}
#fb-col-re-w {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:column-reverse;
	frex-wrap:wrap;
}

#fb-row-wr {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	frex-wrap:wrap-reverse;
}
#fb-row-re-wr {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row-reverse;
	frex-wrap:wrap-reverse;
}
#fb-col-wr {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:column;
	frex-wrap:wrap-reverse;
}
#fb-col-re-wr {
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:column-reverse;
	frex-wrap:wrap-reverse;
}

/*=====================================
justify-content
=====================================*/
#fb-just-fs{
	background:#e4e4e4;
	height:150px;
	display: flex;
	justify-content:flex-start;
}
#fb-just-fe{
	background:#e4e4e4;
	height:150px;
	display: flex;
	justify-content:flex-end;
}
#fb-just-ct{
	background:#e4e4e4;
	height:150px;
	display: flex;
	justify-content:center;
}
#fb-just-sb{
	background:#e4e4e4;
	height:150px;
	display: flex;
	justify-content:space-between;
}
#fb-just-sa{
	background:#e4e4e4;
	height:150px;
	display: flex;
	justify-content:space-around;
}

/*=====================================
align-content
=====================================*/
#fb-al-con-fs{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:flex-start;
}
#fb-al-con-fe{
	background:#e4e4e4;
	width:150px;
	height:150px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:flex-end;
}
#fb-al-con-ct{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:center;
}
#fb-al-con-sb{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:space-between;
}
#fb-al-con-sa{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:space-around;
}
#fb-al-con-st{
	background:#e4e4e4;
	height:150px;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-content:stretch;
}

/*=====================================
align-items
=====================================*/

.items li.colA{font-size:2em;}
.items li.colB{font-size:3em;}
.items li.colC{font-size:5em;}
.items li.colD{font-size:1em;}

#fb-al-itm-fs{
	background:#e4e4e4;
	height:150px;
	display: flex;
	align-items:flex-start;
}
#fb-al-itm-fe{
	background:#e4e4e4;
	height:150px;
	display: flex;
	align-items:flex-end;
}
#fb-al-itm-ct{
	background:#e4e4e4;
	height:150px;
	display: flex;
	align-items:center;
}
#fb-al-itm-bl{
	background:#e4e4e4;
	height:150px;
	display: flex;
	align-items:baseline;
}
#fb-al-itm-st{
	background:#e4e4e4;
	height:150px;
	display: flex;
	align-items:stretch;
}

/*=====================================
More Frexible
=====================================*/
#fb-order{
	display:flex;
}
#fb-order .colA{order:3;}
#fb-order .colB{order:2;}
#fb-order .colC{order:1;}
#fb-order .colD{order:4;}



#fb-flex-grow{
	display:flex;
}
#fb-flex-grow .colB{flex-grow:.5;}


#fb-flex-shrink{
	display:flex;
}
#fb-flex-shrink li{
width:30%;
}
#fb-flex-shrink li.colB{flex-shrink:5;}


#fb-flex-basis{
	display:flex;
}
#fb-flex-basis .colA{flex-basis:50px;}

#fb-flex{
	display:flex;
}
#fb-flex .colA{ flex: .3 0 30%;}


#fb-align-self{
	height:60px;
	display:flex;
}
#fb-align-self .colA{ align-self:center;}