[CSS] Change the Alignment of a Single Flexed Item with 'align-self'

Inside of a flexed container, a single item can control its own flex with align-self. The possible values are flex-start, flex-end, center, or stretch

 

Inside column layout, the ' stretch' is also limited by the 'height'; 

Inside row layout, the 'stretch' is aslso limited by the 'width'.

 

body {
  display: flex;
  flex-direction: row;
}

.container {
  background-color: #ebb871;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center
}


.box1 { min-width: 50px; min-height: 50px; 
  /*align-self: flex-start;
  align-self: flex-end;
  align-self: center;*/
  align-self: stretch;
}

 

body {
  display: flex;
  flex-direction: column;
}

.container {
  background-color: #ebb871;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.box1 { min-width: 50px; min-height: 50px; 
  /*align-self: flex-start;
  align-self: flex-end;
  align-self: center;*/
  align-self: stretch;
}