Align-items, align-content e align-self
Dando continuidade à saga de display-flex, hoje escreverei sobre as propriedades align. Mas antes, é necessário esclarecer dois termos muito importantes e comuns nos artigos e fóruns de discussão quando se trata do display-flex. Quando o termo “transversal” é usado, refere-se à vertical, enquanto “eixo principal” é a horizontal, considerando o padrão do flex-direction como row, quando alterado para column a ideia dos eixos é apenas invertida respectivamente.
Assim, iniciaremos pelo align-items que já foi brevemente tratado no story anterior. Novamente, reitero o que já foi pontuado no último story: align-items é uma propriedade do contêiner. O efeito que este produz é alinhar os itens no eixo principal do contêiner, o centro de cada elemento alinhado ao outro, como:
O align-self em contrapartida, é aplicada em flex-items, com os mesmo valores do align-items, faz o alinhamento no eixo principal, a diferença, porém, está no efeito relacionado apenas ao item onde a propriedade foi definida, por exemplo, quando align-self: start é definido, o resultado é o da imagem. As imagens são do site da mozilla (https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) que esclarecem este comportamento:
Por fim, o align-content é outra propriedade de contêiner. Este faz com que a distância entre as linhas sejam influenciadas (considerando flex-direction: row). Então, de forma simples, o que o align-content faz é agir sobre o posicionamento das linhas (distanciado ou aproximando-as) dentro do contêiner se houver espaço para isso, e é claro, se houver mais de uma linha.
Resumidamente, align-content age sobre linhas e colunas completas, enquanto o align-items tem sua influência limitada aos itens dentro de linhas ou colunas. E para lidar com um item específico usa-se o align-self.
