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;}