Estrutura e conceitos de flexbox

flexbox.css

.container{
  display: flex;
  flex-direction: row; /*Eixo principal*/
  justify-content:center ;/*Alinhamento de acordo com o eixo principal-flex-direction*/
  align-items: center; /*Alinhamento no eixo perpendicular !flex-direction*/
  /* flex-wrap: wrap; */ /*Quebra o número de elementos em linhas/colunas */
  align-content: center; /*Alinha elementos que estão quebrando linha de acordo com o eixo perpendicular- quando usar warap*/
  row-gap: 2rem; /* Espaçamento entre as linhas que estão quebrando */ 
  column-gap: 1rem;/* Espaçamento entre as colunas que estão quebrando */ 
/*   gap:2rem; /* pode usar somente gap para colunas e linhas*/ 
  height: 100vh;
  background-color: rgb(129, 35, 35);
}

.container__item {
  width: 5rem;
  height:5rem;
  margin-top:1rem;
  border-radius: 5px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: 0.5s;
  transform:translateY(0);
  /* flex-grow: 1; */ /*Ocupa o espaço restante da linha adcionando proporções iguais para todos os elementos*/
}