Flexbox: Domine justify-content, align-items e align-self

Neste tutorial, vamos explorar três propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. fundamentais do FlexboxFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados. que controlam como os itens dentro de um contêiner são alinhados e distribuídos: justify-content, align-items e align-self. Essas propriedades fornecem grande flexibilidade para criar layouts responsivosLayouts Responsivos com HTML e CSSAprenda a criar layouts responsivos com HTML, CSS e Flexbox. Utilize unidades fluidas e media queries para otimizar sites em todos os dispositivos. e organizados, ajustando o posicionamento dos elementos tanto no eixo principal quanto no eixo transversal.

Introdução🔗

O FlexboxFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados. (ou Flexible Box LayoutFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados.) é um modelo de layout unidimensional que facilita a criação de estruturas adaptáveis. Por meio de algumas propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. específicas, é possível controlar como os itens se distribuem dentro de um contêiner, o que simplifica bastante o trabalho de alinhamento e disposição espacial dos elementos.

Neste tutorial, focaremos em:

1. justify-content: manipula o alinhamento ao longo do eixo principal (por padrão, o eixo horizontal).

2. align-items: manipula o alinhamento ao longo do eixo transversal (por padrão, o eixo vertical).

3. align-self: permite que um item específico se alinhe de forma independente dos demais no eixo transversal.

Dica: O eixo principal (main axis) é definido pela propriedade flex-direction (que, por padrão, é row). Já o eixo transversal (cross axis) fica perpendicular ao eixo principal.

Visão Geral🔗

Dentro de um contêiner flex, podemos definir como o espaço é distribuído e como os elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. se alinham, seja ao longo do eixo horizontal (quando flex-directionFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados.: row) ou ao longo do eixo vertical (quando flex-directionFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados.: column). As propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. de alinhamento funcionam da seguinte forma:

• justify-content: usado no contêiner pai para controlar a distribuição dos itens ao longo do eixo principal.
• align-items: usado no contêiner pai para controlar a distribuição dos itens ao longo do eixo transversal.
• align-self: usado diretamente no item para controlar seu alinhamento individual no eixo transversal.

justify-content🔗

A propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. justify-content é aplicada no container flexFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados. e se responsabiliza pelo alinhamento e pela distribuição de espaço entre os itens no eixo principal. Se o contêiner estiver configurado com flex-directionFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados.: row (padrão), o alinhamento será horizontal.

Sintaxe:

.container {
  display: flex;
  justify-content: <valor>;
}

Valores mais comuns:

Exemplo de uso

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* Distribui de forma uniforme entre os itens */
  background-color: #eee;
  padding: 10px;
}

No exemplo acima, os itens serão dispostos horizontalmente, com espaços iguais entre eles, mas sem sobrar espaço nas extremidades.

align-items🔗

A propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. align-items também é aplicada no container flexFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados., mas controla o alinhamento dos itens no eixo transversal. Novamente, se flex-directionFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados.: row, o eixo transversal será vertical.

Sintaxe:

.container {
  display: flex;
  align-items: <valor>;
}

Valores mais comuns:

Exemplo de uso

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2 com texto mais longo</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  height: 200px; /* Altura fixa para visualização */
  background-color: #ddd;
}
.item {
  background-color: #9ec5fa;
  padding: 10px;
  margin: 5px;
}

Neste caso, cada elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. fica verticalmente centralizado dentro do contêiner com 200px de alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos..

align-self🔗

Enquanto align-items alinha todos os itens ao mesmo tempo, a propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. align-self é definida diretamente no item para que ele possa se alinhar de forma diferente dos demais. Isso sobrescreve o alinhamento definido em align-items.

Sintaxe:

.item-especifico {
  align-self: <valor>;
}

Valores mais comuns:

Exemplo de uso

<div class="container">
  <div class="item">Item 1</div>
  <div class="item destaque">Item 2 (destaque)</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  align-items: center; /* Todos centralizados, por padrão */
  height: 150px;
  background-color: #ddd;
}
.item {
  background-color: #9ec5fa;
  padding: 10px;
  margin: 5px;
  width: 100px;
  text-align: center;
}
.destaque {
  align-self: flex-start; /* Este item específico ficará no topo do contêiner */
}

Observe que o Item 2 se posiciona no topo, enquanto os demais ficam centralizados verticalmente.

Tabela Resumo🔗

Para facilitar a consulta, segue uma tabela simples resumindo as três propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters.:

Conclusão🔗

As propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. justify-content, align-items e align-self são fundamentais para o controle de alinhamento e distribuição de elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. em um contêiner flex. Elas fornecem grande flexibilidade na hora de criar layouts responsivosLayouts Responsivos com HTML e CSSAprenda a criar layouts responsivos com HTML, CSS e Flexbox. Utilize unidades fluidas e media queries para otimizar sites em todos os dispositivos., ajustando o posicionamento tanto no eixo principal quanto no eixo transversal.

Dominar essas propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. é crucial para desenvolver interfaces mais organizadas, tornando seu código CSS mais limpo, simples e manutenível.