Qual a diferença entre alinhar conteúdo e alinhar itens?

Alguém pode me mostrar a diferença entre align-itemse align-content?

A align-itemspropriedade flex-box alinha os itens dentro de um contêiner flex ao longo do eixo transversal, assim como justify-contentfaz ao longo do eixo principal. (Para o padrão, flex-direction: rowo eixo transversal corresponde à vertical e o eixo principal corresponde à horizontal. Com flex-direction: columnesses dois são trocados respectivamente).

Aqui está um exemplo de como align-items:centerfica:

Mas align-contenté para caixas flexíveis de várias linhas. Não tem efeito quando os itens estão em uma única linha. Alinha toda a estrutura de acordo com seu valor. Aqui está um exemplo para align-content: space-around;:

E aqui está como align-content: space-around;com a align-items:centeraparência:

Observe que a terceira caixa e todas as outras caixas na primeira linha mudam para centralizadas verticalmente nessa linha.

Aqui estão alguns links de codepen para brincar:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Aqui está uma caneta super legal que mostra e permite que você jogue com quase tudo no flexbox.

Acho o exemplo http://flexboxfroggy.com/ muito útil.

Você levará de 10 a 20 minutos e, no nível 21, você encontrará a resposta para sua pergunta. Mencionou:

align-content determina o espaçamento entre linhas, enquanto align-items determina como os itens como um todo são alinhados no contêiner. Quando há apenas uma linha, o alinhamento de conteúdo não tem efeito

Primeiro, align-itemsé para itens em uma única linha. Portanto, para uma única linha de elementos no eixo principal , align-itemsalinhará esses itens um ao outro e começará com uma nova perspectiva a partir da próxima linha.

Agora, align-contentnão interfere nos itens seguidos, mas nas próprias linhas . Portanto, align-contenttentará alinhar as linhas entre si e flexionar o contêiner.

Verifique este violino: https://jsfiddle.net/htym5zkn/8/

Eu tive a mesma confusão. Depois de alguns ajustes baseados em muitas das respostas acima, finalmente posso ver as diferenças. Na minha humilde opinião, a distinção é melhor demonstrada com um contêiner flexível que satisfaz as duas condições a seguir:

1. O próprio contêiner flexível possui uma restrição de altura (por exemplo, min-height: 60rem) e, portanto, pode se tornar muito alto para seu conteúdo
2. Os itens filhos incluídos no contêiner têm alturas desiguais

A condição 1 me ajuda a entender o que contentsignifica em relação ao contêiner pai. Quando o conteúdo estiver nivelado com o contêiner, não poderemos ver nenhum efeito de posicionamento vindo align-content. Somente quando temos espaço extra ao longo do eixo transversal, começamos a ver seu efeito: alinha o conteúdo em relação aos limites do contêiner pai.

A condição 2 me ajuda a visualizar os efeitos de align-items: alinha itens entre si.

Aqui está um exemplo de código. As matérias-primas vêm do tutorial CSS Grid de Wes Bos (21. Flexbox vs. CSS Grid)

• Exemplo de HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• Exemplo de CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Exemplo 1 : Vamos restringir a janela de exibição para que o conteúdo fique nivelado com o contêiner. É nesse momento align-content: flex-start;que não há efeitos, pois todo o bloco de conteúdo está bem dentro do contêiner (não há espaço extra para reposicionar!)

Observe também a 2ª linha - veja como os itens estão alinhados ao centro entre si.

Exemplo 2 : à medida que ampliamos a janela de exibição, não temos mais conteúdo suficiente para encher o contêiner inteiro. Agora começamos a ver os efeitos de align-content: flex-start;--it alinha o conteúdo em relação à borda superior do contêiner.

Esses exemplos são baseados no flexbox, mas os mesmos princípios são aplicáveis ​​à grade CSS. Espero que isto ajude :)

Bem, eu os examinei no meu navegador.

align-contentpode mudar a altura de uma linha para a direcção da linha ou da largura para a coluna quando o seu valor é de estiramento, ou adicionar espaço vazio entre ou em torno das linhas de space-between, space-around, flex-start,flex-end values .

align-itemspode alterar a altura ou posição dos itens dentro da área da linha. Quando os itens não são agrupados, eles têm apenas uma linha, cuja área é sempre esticada até a área da caixa flexível (mesmo que os itens estourem) e align-contentnão tem efeito em uma única linha. Portanto, não tem efeito em itens que não são embalados e apenasalign-items pode alterar a posição dos itens ou esticá-los quando todos estiverem em uma única linha.

No entanto, se eles estiverem agrupados, você terá várias linhas e itens dentro de cada linha. E se todos os itens de cada linha tiverem a mesma altura (para direção da linha), a altura dessa linha será igual à altura desses itens e você não verá nenhum efeito alterando o align-itemsvalor.

Portanto, se você deseja afetar os itens align-itemsquando os itens são quebrados e têm a mesma altura (para direção da linha), primeiro você deve usar o align-contentvalor de estiramento para expandir a área das linhas.

align-content

align-contentcontrola o posicionamento no eixo cruzado (isto flex-directioné row, na direção vertical, se for , e horizontal, se flex-directionfor column), de várias linhas em relação uma à outra.

(Pense nas linhas de um parágrafo sendo espalhadas verticalmente, empilhadas em direção ao topo, empilhadas em direção ao fundo. Isso está sob um flex-directionparadigma de linha).

alinhar itens

align-items controla o eixo transversal de uma linha individual de elementos flexíveis.

(Pense em como uma linha individual de um parágrafo está alinhada, se contiver algum texto normal e um texto mais alto, como equações matemáticas. Nesse caso, será a parte inferior, superior ou central de cada tipo de texto em uma linha que estar alinhado?)

O que aprendi com cada resposta e visitando o blog é

qual é o eixo transversal e o eixo principal

• o eixo principal é a linha horizontal e o eixo transversal é a coluna vertical - para flex-direction: row
• eixo principal é coluna vertical e eixo transversal é linha horizontal - para flex-direction: column

Agora alinhar conteúdo e alinhar itens

align-content é para a linha, funciona se o contêiner tiver (mais de uma linha) Propriedades do align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items é para os itens da linha Properties of align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Para mais informações, visite flex

A principal diferença é quando a altura dos elementos não é a mesma! Então você pode ver como, na linha, eles são todos center \ end \ start

de acordo com o que eu entendi daqui :

quando você usa item de alinhamento ou item justificado, está ajustando "o conteúdo dentro de um item de grade ao longo do eixo da coluna ou do eixo da linha, respectivamente.

Mas: se você usar conteúdo de alinhamento ou justificar conteúdo, estará definindo a posição de uma grade ao longo do eixo da coluna ou do eixo da linha. isso ocorre quando você tem uma grade em um contêiner maior e a largura ou a altura são inflexíveis (usando px).