* {
  box-sizing: border-box;
}

pre {
  white-space: pre;
}
.flex-container-header {
  display: flex;
  background-color: DodgerBlue;
  flex-wrap: wrap-reverse;
  flex-wrap: wrap; 
  justify-content: flex-start;
  justify-content: space-around;
  justify-content: center; 
}


.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
  flex-wrap: wrap-reverse;
  flex-wrap: wrap; 
  justify-content: flex-start;
  justify-content: center; 
  justify-content: space-around;  
  align-items: stretch;
  align-items: flex-start;
}


.flex-container > div {
  background-color: #f1f1f1;
  
  /* width: 100px;
  text-align: center;
  line-height: 75px; */
  
  margin: 10px;
  padding: 20px;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 14px;
}

.flex-item-odd {
  background-color: #fafaf1;
  padding: 10px;
  /* flex: 50%; */
}

.flex-item-even {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}


/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

/* https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery
.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 20%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 20%;
}

/ * Responsive layout - makes a one column-layout instead of a two-column layout * /
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 50%;
  }
}
@media (max-width: 600px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}
*/


div#myDiv {background-color: green;}
#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}

div {
  resize: both;
  overflow: auto;
  /*
  margin: 4px;
  border: 1px solid black;
  outline: 2px dashed blue;
  outline-offset: 5px;
  */
}