Align-items

Расположение всех flex-child вдоль вспомогательной оси

Задается flex-parent. По умолчанию устанавливается stretch

.flex-parent {
 /* align-items: stretch; */
}    
      

• stretch

  1

  2

  4

  3

  5

  6

• flex-start

  
  .flex-parent {
    align-items: flex-start;
  }    
            

  1

  2

  4

  3

  5

  6

• flex-end

  
  .flex-parent {
    align-items: flex-end;
  }    
            

  1

  2

  4

  3

  5

  6

• baseline

  
  .flex-parent {
    align-items: baseline;
  } 
  .flex-child:nth-of-type(1) {
    font-size: 50px;
    line-height: 1;
  }   
            

  1

  2

  4

  3

  5

  6

• center

  
  .flex-parent {
    align-items: center;
  }    
           

  1

  2

  4

  3

  5

  6