/* Block Flex */
.outside-block{
  padding: 5px;
  background-color: lightblue;
  display: inline-block;
}

.parent-block{
  display: flex;  /* makes block flex */
  padding: 5px;
  background-color: yellow;
}

/* Inline Flex */
.outside-inline{
  padding: 5px;
  background-color: lightblue;
  display: inline-block;
}

.parent-inline{
  display: inline-flex; /* makes inline flex */
  padding: 5px;
  background-color: yellow;
}

/* Nested Flex */
.nested-parent{
  height: 200px;
  background-color: lightblue;
  display: flex; /* makes flex */
}

.nested-child{
  width: 25%;
  background-color: yellow;
  margin: 10px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-evenly;
}

.nested-child-child{
  background-color: green;
  padding: 10px;
}