/* 
	display:flex goes on the parent element 
*/
.parent {
  display: flex;
  background-color: lightblue;
  border: 1px solid black;
  height: 300px;
}
.box {
	width: 100px;
  height: auto;
  background-color: blue;
  border: 2px solid black;
  margin: 0.5em;
  color: white;
}

#row {
	flex-direction: row;
  flex-wrap: wrap;
  /*
  	flex-flow is the shorthand of flex-direction & flex-wrap
  	flex-flow: row wrap;
  
  	justify-content property aligns items along the main axis
  	flex-start, flex-end, center, space-between, space-around, space-evenly
  
  	align-items property aligns items along the cross axis
  	flex-start, flex-end, center, stretch
  
  	align-content does the same thing as align-items. The main difference between the two is that align-content is meant for wrapped elements
  	align-content allows the use of space-between, space-around, and space-evenly values
  */
  justify-content: space-evenly;
  align-items: center;
}
#row-reverse {
	flex-direction: row-reverse;
}
#column {
	flex-direction: column;
  justify-content: space-between;
}
#column-reverse {
	flex-direction: column-reverse;
}

/*
	align-self can be used on an individual child element to override the parent's align-item value
*/
.end {
	align-self: flex-end;
}
.start {
	align-self: flex-start;
}
.stretch {
	align-self: stretch;
}